inline-sizeyra loginė savybė, apibrėžianti elemento plotį, kai rašymo režimas yra horizontalus, arba elemento aukštį, kai jis writing-modeyra vertikalus.
.element ( inline-size: 700px; writing-mode: vertical-lr; )Kaip jau spėjote iš aukščiau pateikto pavyzdžio, writing-modeypatybė pakeičia teksto ir išdėstymo srauto orientaciją 90 laipsnių. Yra dvi pagrindinės priežastys, kodėl norėtumėte tai padaryti.
Pirmiausia, norėdami pasirinkti dizainą, galbūt norėsite ant elemento rodyti vertikalų tekstą, tarkim, antraštę:
Antra ir tikriausiai svarbiausia priežastis, dėl kurios galbūt norėsite naudoti loginę ypatybę, pvz., Įterptinio dydžio, yra pritaikyti internacionalizaciją svetainėje. Daugelį Rytų Azijos scenarijų, tokių kaip kinų, japonų ir korėjiečių, galima parašyti horizontaliai arba vertikaliai. Naudodamiesi loginėmis savybėmis, mes galime pateikti teisingą elementų dydžio kryptį pagal vartotojo rašymo režimą.
Jen Simmons turi straipsnį ir pristatymą, kuriame gilinamasi į CSS rašymo režimus.
Kodėl mes negalime naudoti tik patikimo widthturto?
Tu gali! Tačiau galbūt norėsite kreiptis į tai, inline-sizejei nerimaujate dėl turinio konteksto, kuris keičiasi atsižvelgiant į vartotojo kalbą. widthyra fizinis matmuo, todėl pasikeitus rašymo režimui, elementas išlaiko horizontalaus pločio dydį, sulaužydamas maketą, kai jis yra vertikalus. Loginės savybės, pavyzdžiui inline-size, gali reaguoti į tuos pokyčius ir pritaikyti plotį tinkama kryptimi.
Pvz., Jei pastraipos elementas yra 400 taškų pločio, naudojant plotį, kai rašymo režimas nustatytas į vertical-lr, turinys pasisuks keisdamas išdėstymą, tačiau pastraipa išliks 400 taškų, o ne 400 taškų aukščio.
Matyti tai? Na, inline-sizeyra protingas! Jis keičiasi nuo pločio iki aukščio, priklausomai nuo writing-modevertės.
Sintaksė
inline-size: - Pradinis:
auto - Taikoma: tas pats kaip
heightirwidth - Paveldima: ne
- Procentai: kaip ir atitinkamai fizinei nuosavybei
- Apskaičiuota vertė: tokia pati kaip
heightirwidth - Animacijos tipas: pagal apskaičiuotą vertės tipą
Vertybės
/* 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: Elemento įterptasis dydis atitiks jo pagrindinio elemento dydį.fit-content(): Ši funkcija leidžia konteineriui augti iki norimo dydžio, tada tekstą suvynioti, efektyviai pritvirtinant turinį iki pateiktos dydžio vertės. Jis gali būti naudojamas „Grid“ talpyklose, taip pat dėžučių dydžiams, ir nors „caniuse“ rodo tvirtą funkcijos palaikymą, naudojant inline dydį, mūsų bandymai nebuvo tokie įtikinami. Tai galėjo nutikti dėl „Box Sizing Module 3“ lygio specifikacijos darbinio projekto statuso.max-content: Vidinis pageidaujamas plotis, o tai reiškia, kad elementas ištiesia tekstą tol, kol jis gali būti, o langelis bus toks pat ilgas, kaip ir tekstas.min-content: Vidinis minimalus plotis, ty elemento laukelis sumažėja iki mažiausio jo turinio dydžio. Langelis bus didžiausios teksto eilutės dydis.
Demonstracija
Naršyklės palaikymas
| T.Y | Briauna | „Firefox“ | „Chrome“ | „Safari“ | Opera |
|---|---|---|---|---|---|
| Ne | 79+ | 41+ | 57 | 12.1+ | 44+ |
| „Android Chrome“ | „Android Firefox“ | „Android“ naršyklė | „iOS Safari“ | „Opera Mobile“ |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 12.2+ | 59+ |
Atminkite, kad palaikymas naudojant šias funkcijas gali skirtis nuo nuosavybės palaikymo:
fit-content()max-content()min-content()
Daugiau informacijos
- CSS loginių ypatybių ir reikšmių 1 lygio specifikacija (redaktoriaus juodraštis)
- MDN dokumentacija
- CSS loginės savybės (CSS-gudrybės)
- Suprasti logines savybes ir vertybes (žurnalas „Smashing“)
- CSS loginės savybės (Adrianas Roselli)
- Min. Ir maks. Turinio dydis CSS tinklelyje (Jen Simmons, vaizdo įrašas)
- Dvipusės horizontaliosios taisyklės CSS (Hussein Al Hammad)