inline-sizeje logická vlastnosť, ktorá definuje šírku prvku, keď je režim zápisu vodorovný, alebo výšku prvku, ak writing-modeje zvislý.
.element ( inline-size: 700px; writing-mode: vertical-lr; )Ako ste si už mohli všimnúť v príklade vyššie, writing-modevlastnosť zmení orientáciu toku textu a rozloženia o 90 stupňov. Existujú dva hlavné dôvody, prečo by ste to chceli urobiť.
Najskôr ako voľbu dizajnu budete chcieť zobraziť zvislý text na prvku, napríklad v hlavičke:
Druhým - a pravdepodobne najdôležitejším - dôvodom, prečo budete chcieť použiť logickú vlastnosť, ako je vložená veľkosť, je prispôsobenie sa internacionalizácii na webe. Mnoho východoázijských skriptov, ako napríklad čínština, japončina a kórejčina, je možné písať horizontálne alebo vertikálne. Pomocou logických vlastností môžeme zabezpečiť správny smer veľkosti prvkov na základe režimu písania používateľom.
Jen Simmons má článok a prezentáciu, ktoré idú hlbšie do režimov písania CSS.
Prečo nemôžeme jednoducho použiť tú dôveryhodnú widthvlastnosť?
Môžeš! Možno by ste však mali siahnuť inline-sizenamiesto toho, ak máte obavy z toho, že sa kontext vášho obsahu zmení na základe jazyka používateľa. widthje fyzická dimenzia, takže keď sa zmení režim písania, prvok si zachová svoju veľkosť vodorovnej šírky a rozbije rozloženie, keď je nastavený na zvislú polohu. Logické vlastnosti, ako napríklad inline-size, môžu na tieto zmeny reagovať a aplikovať šírku správnym smerom.
Napríklad ak je prvok odseku široký 400 pixelov pomocou šírky, keď je režim písania nastavený na vertical-lr, obsah sa otočí a zmení rozloženie, ale tento odsek zostane široký 400 pixelov namiesto 400 pixelov vysoký.
Vidíte to? No, inline-sizeje múdra! Mení sa zo šírky na výšku, v závislosti od writing-modehodnoty.
Syntax
inline-size: - Počiatočné:
auto - Platí pre: rovnaké ako
heightawidth - Zdedené: č
- Percentá: pokiaľ ide o zodpovedajúce fyzické vlastnosti
- Vypočítaná hodnota: rovnaká ako
heightawidth - Typ animácie: podľa typu vypočítanej 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á veľkosť prvku bude zodpovedať veľkosti jeho nadradeného prvku.fit-content(): Táto funkcia umožňuje, aby sa kontajner zväčšil na požadovanú veľkosť, potom urobte zalomenie textu a efektívne upnite obsah na zadanú hodnotu veľkosti. Môže sa použiť na mriežkové kontajnery, aj na veľkosť škatúľ. Zatiaľ čo program caniuse vykazuje silnú podporu pre túto funkciu s veľkosťou riadkov, naše testovanie bolo menej presvedčivé. Môže to byť spôsobené stavom pracovnej verzie špecifikácie modulu box s veľkosťou úrovne 3.max-content: Vlastná preferovaná šírka, čo znamená, že element roztiahne text tak dlho, ako to len bude možné, a pole bude také dlhé ako text.min-content: Vnútorná minimálna šírka, čo znamená, že rám prvku sa zmenšuje na minimálnu veľkosť jeho obsahu. Políčko bude mať veľkosť najväčšieho reťazca textu.
Ukážka
Podpora prehliadača
| IE | Hrana | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Nie | 79+ | 41+ | 57 | 12,1+ | 44+ |
| Android Chrome | Android Firefox | Prehliadač Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 12,2+ | 59+ |
Upozorňujeme, že podpora používania nasledujúcich funkcií sa môže líšiť od podpory tohto zariadenia:
fit-content()max-content()min-content()
Viac informácií
- Logické vlastnosti a hodnoty CSS úrovne 1 (návrh redaktora)
- Dokumentácia MDN
- Logické vlastnosti CSS (triky CSS)
- Pochopenie logických vlastností a hodnôt (Smashing Magazine)
- Logické vlastnosti CSS (Adrian Roselli)
- Minimálna a maximálna veľkosť obsahu v mriežke CSS (Jen Simmons, video)
- Obojsmerné horizontálne pravidlá v CSS (Hussein Al Hammad)