inline-sizeje logično svojstvo koje definira širinu elementa kada je način zapisivanja vodoravan, odnosno visinu elementa kada writing-modeje okomito.
.element ( inline-size: 700px; writing-mode: vertical-lr; )Kao što ste mogli pretpostaviti iz gornjeg primjera, writing-modesvojstvo mijenja orijentaciju teksta i toka izgleda za 90 stupnjeva. Dva su glavna razloga zašto biste to željeli učiniti.
Prvo, kao izbor dizajna, možda biste trebali prikazati vertikalni tekst na elementu, recimo zaglavlje:
Drugi - i vjerojatno najvažniji - razlog zbog kojeg biste možda željeli koristiti logičko svojstvo poput inline-size je prilagodba internacionalizacije na web mjestu. Mnoga istočnoazijska pisma poput kineske, japanske i korejske mogu se pisati vodoravno ili okomito. Korištenjem logičkih svojstava možemo pružiti točan smjer veličine elemenata na temelju načina pisanja korisnika.
Jen Simmons ima članak i prezentaciju koji dublje ulaze u CSS načine pisanja.
Zašto jednostavno ne bismo mogli iskoristiti staru pouzdanu widthimovinu?
Možeš! Međutim, možda ćete poželjeti posegnuti za inline-sizenjim ako vas brine kontekst vašeg sadržaja koji se mijenja na temelju korisničkog jezika. widthje fizička dimenzija, pa kada se način pisanja promijeni, element zadržava svoju vodoravnu veličinu širine, lomeći raspored kada je postavljen da bude okomit. Logična svojstva, poput toga inline-size, mogu odgovoriti na te promjene i primijeniti širinu u pravom smjeru.
Na primjer, ako je element odlomka širok 400 piksela koristeći širinu, kada je način pisanja postavljen na vertical-lr, sadržaj će se rotirati, mijenjajući izgled, ali taj će odlomak ostati širok 400 piksela umjesto 400 piksela.
Vidi to? Pa, inline-sizepametno je! Mijenja se iz širine u visinu, ovisno o writing-modevrijednosti.
Sintaksa
inline-size: - Inicijal:
auto - Odnosi se na: isto kao
heightiwidth - Naslijeđeno: ne
- Procenti: kao za odgovarajuće fizičko svojstvo
- Izračunata vrijednost: isto kao
heightiwidth - Vrsta animacije: prema izračunatoj vrsti vrijednosti
Vrijednosti
/* 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: Inline veličina elementa pridržavat će se veličine njegovog nadređenog elementa.fit-content(): Ova funkcija omogućuje da spremnik raste do željene veličine, a zatim izvrši umotavanje teksta, učinkovito stežući sadržaj na predviđenu vrijednost veličine. Može se koristiti na Grid spremnicima, kao i za dimenzioniranje kutija, i dok caniuse pokazuje snažnu podršku funkciji s ugrađenom veličinom, naše je testiranje bilo manje odlučno. To bi moglo biti posljedica statusa radnog nacrta modula za dimenzioniranje okvira razine 3.max-content: Unutarnja željena širina, što znači da element rasteže tekst dokle god to može biti i učinit će da okvir bude dugačak kao tekst.min-content: Unutarnja minimalna širina, što znači da se okvir elementa smanjuje na minimalnu veličinu njegovog sadržaja. Okvir će biti veličine najvećeg niza teksta.
Demo
Podrška preglednika
| IE | Rub | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|
| Ne | 79+ | 41+ | 57 | 12,1+ | 44+ |
| Android Chrome | Android Firefox | Android preglednik | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 12,2+ | 59+ |
Imajte na umu da se podrška za korištenje sljedećih funkcija može razlikovati od podrške svojstva:
fit-content()max-content()min-content()
Više informacija
- Specifikacija CSS logičkih svojstava i vrijednosti 1 (Nacrt urednika)
- MDN dokumentacija
- CSS logička svojstva` (CSS-trikovi)
- Razumijevanje logičkih svojstava i vrijednosti (Smashing Magazine)
- CSS logička svojstva (Adrian Roselli)
- Minimalna i maksimalna veličina sadržaja u CSS mreži (Jen Simmons, video)
- Dvosmjerna horizontalna pravila u CSS-u (Hussein Al Hammad)