inline-sizeär en logisk egenskap som definierar bredden på ett element när skrivläget är horisontellt, eller höjden på elementet när det writing-modeär vertikalt.
.element ( inline-size: 700px; writing-mode: vertical-lr; )Som du kanske har gissat av exemplet ovan writing-modeändrar egenskapen orienteringen av texten och layoutflödet med 90 grader. Det finns två huvudorsaker till varför du vill göra det.
Först, som ett designval, kanske du vill visa vertikal text på ett element, säg en rubrik:
Den andra - och förmodligen mest betydelsefulla - anledningen till att du kanske vill använda en logisk egenskap som inline-storlek är att tillgodose internationalisering på en webbplats. Många östasiatiska manus som kinesiska, japanska och koreanska kan skrivas horisontellt eller vertikalt. Med hjälp av logiska egenskaper kan vi tillhandahålla rätt storleksriktning för element baserat på användarens skrivläge.
Jen Simmons har en artikel och presentation som går djupare in i CSS-skrivlägen.
Varför kan vi inte bara använda den pålitliga widthegenskapen?
Du kan! Du kanske dock vill sträva efter inline-sizeistället om du är orolig för att innehållet ändras baserat på en användares språk. widthär en fysisk dimension, så när skrivläget ändras behåller ett element sin horisontella breddstorlek och bryter en layout när den är inställd att vara vertikal. Logiska egenskaper, som inline-size, kan svara på dessa förändringar och tillämpa bredd i rätt riktning.
Till exempel, om ett styckeelement är 400px brett med hjälp av bredd, när skrivläget är inställt på vertical-lr, roterar innehållet och ändrar layouten, men det stycket förblir 400px brett istället för 400px högt.
Se det? Tja, inline-sizeär smart! Det ändras från bredd till höjd, beroende på writing-modevärdet.
Syntax
inline-size: - Första:
auto - Gäller för: samma som
heightochwidth - Ärvt: nej
- Procentandelar: för motsvarande fysiska egendom
- Beräknat värde: samma som
heightochwidth - Animationstyp: efter beräknad värdetyp
Värden
/* 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: Elementets inbyggda storlek följer storleken på dess överordnade element.fit-content(): Denna funktion gör att en behållare kan växa till önskad storlek och sedan göra textomslaget, vilket effektivt klämmer fast innehållet till det angivna storleksvärdet. Den kan användas på rutnätbehållare, såväl som dimensionering av lådor, och medan caniuse visar starkt stöd för funktionen med inline-storlek, var vår testning mindre avgörande. Det kan bero på Box Sizing Module Level 3 specs Working Draft-status.max-content: Den inneboende föredragna bredden, vilket innebär att elementet sträcker ut texten så länge det kan vara och gör att rutan blir så lång som texten.min-content: Den inneboende minimibredden, vilket innebär att elementets ruta minskar till minsta storlek på dess innehåll. Rutan har storleken på den största textsträngen.
Demo
Webbläsarstöd
| IE | Kant | Firefox | Krom | Safari | Opera |
|---|---|---|---|---|---|
| Nej | 79+ | 41+ | 57 | 12.1+ | 44+ |
| Android Chrome | Android Firefox | Android-webbläsare | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 12.2+ | 59+ |
Observera att stöd för användning av följande funktioner kan skilja sig från stöd för fastigheten:
fit-content()max-content()min-content()
Mer information
- CSS logiska egenskaper och värden nivå 1 specifikation (Editor's Draft)
- MDN-dokumentation
- CSS Logical Properties` (CSS-Tricks)
- Förstå logiska egenskaper och värden (Smashing Magazine)
- CSS Logical Properties (Adrian Roselli)
- Min och max innehållsstorlek i CSS Grid (Jen Simmons, video)
- Dubbelriktade horisontella regler i CSS (Hussein Al Hammad)