inline-sizeje logická vlastnost, která definuje šířku prvku, když je režim zápisu vodorovný, nebo výšku prvku, když writing-modeje svislý.
.element ( inline-size: 700px; 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ňů. Existují dva hlavní důvody, proč byste to chtěli udělat.
Nejprve můžete jako výběr designu chtít zobrazit svislý text na prvku, řekněme záhlaví:
Druhým - a pravděpodobně nejdůležitějším - důvodem, proč byste mohli chtít použít logickou vlastnost, jako je vložená velikost, 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.
Proč nemůžeme prostě použít důvěryhodnou widthvlastnost?
Můžeš! Možná však budete chtít inline-sizemísto toho sáhnout, pokud máte obavy z toho, že se kontext vašeho obsahu mění na základě jazyka uživatele. 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 inline-size, mohou reagovat na tyto změny a použít šířku správným směrem.
Například pokud je prvek odstavce široký 400 pixelů pomocí šířky, když je režim psaní nastaven na vertical-lr, obsah se otočí a změní rozložení, ale tento odstavec zůstane široký 400 pixelů místo 400 pixelů vysoký.
Vidíš to? No, inline-sizeje chytrý! Mění se od šířky k výšce, v závislosti na writing-modehodnotě.
Syntax
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 */ inline-size: 250px; inline-size: 5rem;
/* Percentage values */ inline-size: 75%;
/* Keyword values */ inline-size: auto; inline-size: fit-content(5rem); inline-size: max-content; inline-size: min-content;
/* Global values */ inline-size: inherit; inline-size: initial; inline-size: unset; auto: Vložená velikost prvku bude odpovídat velikosti jeho nadřazeného prvku.fit-content(): Tato funkce umožňuje kontejneru růst do požadované velikosti, poté zalomit text a efektivně upnout obsah na zadanou hodnotu velikosti. Může být použit na Grid kontejnerech, stejně jako velikost boxu, a zatímco caniuse ukazuje silnou podporu pro funkci s inline velikostí, naše testování bylo méně přesvědčivé. To by mohlo být způsobeno stavem pracovního konceptu specifikace modulu velikosti 3 modulu Box Sizing.max-content: Vlastně upřednostňovaná šířka, což znamená, že prvek roztáhne text tak dlouho, jak jen může, a způsobí, že pole bude stejně dlouhé jako text.min-content: Vnitřní minimální šířka, což znamená, že rámeček prvku se zmenší na minimální velikost jeho obsahu. Pole bude mít velikost největšího řetězce textu.
Ukázka
Podpora prohlížeče
| TJ | Okraj | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Ne | 79+ | 41+ | 57 | 12,1+ | 44+ |
| Android Chrome | Android Firefox | Prohlížeč Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 12,2+ | 59+ |
Upozorňujeme, že podpora používání následujících funkcí se může lišit od podpory služby:
fit-content()max-content()min-content()
Více informací
- Specifikace logických vlastností a hodnot CSS úrovně 1 (koncept editora)
- Dokumentace MDN
- Logické vlastnosti CSS (triky CSS)
- Porozumění logickým vlastnostem a hodnotám (Smashing Magazine)
- Logické vlastnosti CSS (Adrian Roselli)
- Minimální a maximální velikost obsahu v mřížce CSS (Jen Simmons, video)
- Obousměrná horizontální pravidla v CSS (Hussein Al Hammad)