inline-sizeolyan logikai tulajdonság, amely meghatározza az elem szélességét, ha az írási mód vízszintes, vagy az elem magasságát, ha az writing-modefüggőleges.
.element ( inline-size: 700px; writing-mode: vertical-lr; )Amint azt a fenti példa kitalálhatta, a writing-modetulajdonság 90 fokkal megváltoztatja a szöveg és az elrendezés folyamatának orientációját. Ennek két fő oka van.
Először is, tervezési lehetőségként érdemes függőleges szöveget megjeleníteni egy elemen, mondjuk egy fejlécet:
A második - és valószínűleg a legjelentősebb - ok, amiért érdemes használni egy logikai tulajdonságot, például az inline méretet, az az, hogy a webhelyen nemzetközivé tegye. Sok kelet-ázsiai szkript, például kínai, japán és koreai, írható vízszintesen vagy függőlegesen. Logikai tulajdonságok felhasználásával megadhatjuk az elemek helyes méretirányát a felhasználó írási módja alapján.
Jen Simmonsnak van egy cikke és bemutatója, amely mélyebben belemerül a CSS írási módokba.
Miért nem használhatjuk csak az 'ol trustable widthproperty-t?
Tudsz! Érdemes azonban elérnie inline-sizehelyette, ha aggódik amiatt, hogy tartalma kontextusa megváltozik a felhasználó nyelve alapján. widthfizikai dimenzió, így amikor az írási mód megváltozik, egy elem megtartja a vízszintes szélességét, és megszakítja az elrendezést, amikor függőlegesre van állítva. A logikai tulajdonságok hasonlóan inline-sizereagálhatnak ezekre a változásokra, és a szélességet a megfelelő irányba alkalmazhatják.
Például, ha egy bekezdéselem szélessége 400px széles, amikor az írási módot állítja vertical-lr, a tartalom el fog forogni, megváltoztatva az elrendezést, de ez a bekezdés továbbra is 400px széles lesz 400px magas helyett.
Nézd azt? Nos, inline-sizeokos! Szélességről magasságra változik, az writing-modeértéktől függően .
Szintaxis
inline-size: - A kezdeti:
auto - A következőkre vonatkozik: ugyanaz, mint
heightéswidth - Örökölt: nem
- Százalékok: ami a megfelelő fizikai tulajdonságot illeti
- Számított érték: ugyanaz, mint a
heightéswidth - Animáció típusa: kiszámított értéktípus szerint
Értékek
/* 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: Az elem belső mérete ragaszkodni fog a szülőelem méretéhez.fit-content(): Ez a funkció lehetővé teszi, hogy a tároló a kívánt méretig növekedjen, majd a szöveget tekerje be, és hatékonyan rögzítse a tartalmat a megadott méretértékhez. Használható Grid konténereken, valamint dobozok méretezésénél, és bár a caniuse erőteljes támogatást mutat a funkcióhoz, inline méret mellett, tesztelésünk kevésbé volt meggyőző. Ennek oka lehet a Box Sizing Module 3. szintű specifikáció Working Draft állapota.max-content: A belső előnyben részesített szélesség, vagyis az elem addig nyújtja a szöveget, ameddig csak lehetséges, és a mező olyan hosszú lesz, mint a szöveg.min-content: A belső minimális szélesség, vagyis az elem mezője a tartalom minimális méretére csökken. A mező a legnagyobb szövegsor méretének felel meg.
Demó
Böngésző támogatás
| AZAZ | Él | Firefox | Króm | Szafari | Opera |
|---|---|---|---|---|---|
| Nem | 79+ | 41+ | 57 | 12.1+ | 44+ |
| Android Chrome | Android Firefox | Android böngésző | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 12.2+ | 59+ |
Vegye figyelembe, hogy a következő funkciók használatának támogatása eltérhet a tulajdonság támogatásától:
fit-content()max-content()min-content()
Több információ
- CSS logikai tulajdonságok és értékek 1. szintű specifikáció (a szerkesztő tervezete)
- MDN dokumentáció
- CSS logikai tulajdonságok (CSS-trükkök)
- A logikai tulajdonságok és értékek megértése (Smashing Magazine)
- CSS logikai tulajdonságok (Adrian Roselli)
- Min és max tartalom méretezése a CSS Gridben (Jen Simmons, videó)
- Kétirányú horizontális szabályok a CSS-ben (Husszein Al Hammad)