Max. vložená velikost - Triky CSS

max-inline-sizeje logická vlastnost v CSS, která definuje maximální šířku prvku, když writing-modeje horizontální, nebo maximální výšku prvku, když writing-modeje vertikální.

.element ( max-inline-size: 500px; writing-mode: vertical-lr; )

Jak jste mohli uhodnout v příkladu výše, writing-modevlastnost změní orientaci toku textu a rozložení o 90 stupňů.

Hlavním důvodem ke změně orientace, kromě vytváření efektních návrhů, je přizpůsobení internacionalizace na webu. Mnoho východoasijských skriptů, jako je čínština, japonština a korejština, lze psát vodorovně nebo svisle. Pomocí logických vlastností můžeme poskytnout správný směr dimenze prvků na základě režimu psaní uživatele.

Jen Simmons má článek a prezentaci, které jdou hlouběji do režimů psaní CSS.

Nemůžeme ten `max-width`majetek prostě použít ?

Ano! Pokud ale nepodporujete Internet Explorer, není důvod max-inline-sizemísto toho jej nepoužívat . max-widthje fyzická dimenze, takže když se změní režim psaní, prvek si zachová svou velikost vodorovné šířky a rozbije rozvržení, když je nastaven na svislý. Logické vlastnosti, jako max-inline-size, mohou reagovat na tyto změny a použít velikost ve správné orientaci.

Syntax

max-inline-size: ;

Počáteční: auto
Platí pro: stejné jako heightawidth
Zděděno: ne
Procenta: pokud jde o odpovídající fyzickou vlastnost
Vypočítaná hodnota: stejná jako heightawidth
Typ animace: podle typu vypočítané hodnoty

Hodnoty

/* Length values */ max-inline-size: 250px; max-inline-size: 5rem;   /* Percentage values */ max-inline-size: 75%;   /* Keyword values */ max-inline-size: auto; max-inline-size: fit-content(5rem); max-inline-size: max-content; max-inline-size: min-content;   /* Global values */ max-inline-size: inherit; max-inline-size: initial; max-inline-size: unset;

Ukázka

Když writing-modeje nastaveno na vertical-rl, obsah se otočí a změní rozložení. Šířka max-widthpole se bude otáčet s obsahem. Ale max-inline-sizeje chytrý! Svou šířku ponechává v taktu, bez ohledu na writing-modehodnotu. Přepnutím writing-modev následující ukázce zobrazíte rozdíl mezi nimi.