inline-sizeer en logisk egenskab, der definerer bredden på et element, når skrivetilstanden er vandret, eller elementets højde, når den writing-modeer lodret.
.element ( inline-size: 700px; writing-mode: vertical-lr; )Som du måske har gættet ved eksemplet ovenfor, writing-modeændrer egenskaben orienteringen af teksten og layoutflowet med 90 grader. Der er to hovedårsager til, at du gerne vil gøre det.
For det første vil du måske som designvalg vise lodret tekst på et element, sig et overskrift:
Den anden - og sandsynligvis mest betydningsfulde - grund til, at du måske vil bruge en logisk egenskab som inline-størrelse, er at imødekomme internationalisering på et websted. Mange østasiatiske scripts som kinesisk, japansk og koreansk kan skrives vandret eller lodret. Ved hjælp af logiske egenskaber kan vi give den korrekte størrelsesretning af elementer baseret på brugerens skrivemåde.
Jen Simmons har en artikel og præsentation, der går dybere ind i CSS-skrivemåder.
Hvorfor kan vi ikke bare bruge den 'pålidelige widthejendom?
Du kan! Det kan dog være en god idé at nå frem til inline-sizestedet, hvis du er bekymret for konteksten for, at dit indhold ændrer sig baseret på en brugers sprog. widther en fysisk dimension, så når skrivemåden ændres, beholder et element sin vandrette bredde og bryder et layout, når det er indstillet til at være lodret. Logiske egenskaber kan f.eks inline-size. Reagere på disse ændringer og anvende bredden i den rigtige retning.
For eksempel, hvis et afsnitelement er 400 px bredt ved hjælp af bredde, når skrivetilstanden er indstillet til vertical-lr, vil indholdet rotere og ændre layoutet, men dette afsnit forbliver 400 px bredt i stedet for 400 pixels højt.
Kan du se det? Nå, inline-sizeer smart! Det skifter fra bredde til højde afhængigt af writing-modeværdien.
Syntaks
inline-size: - Initial:
auto - Gælder for: samme som
heightogwidth - Arvet: nej
- Procentdele: som for den tilsvarende fysiske egenskab
- Beregnet værdi: samme som
heightogwidth - Animationstype: efter beregnet værditype
Værdier
/* 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 integrerede størrelse overholder størrelsen på dets overordnede element.fit-content(): Denne funktion gør det muligt for en container at vokse til den ønskede størrelse, og lav derefter tekstindpakningen, så indholdet effektivt fastspændes til den angivne størrelsesværdi. Det kan bruges på gitterbeholdere såvel som boksstørrelse, og mens caniuse viser stærk støtte til funktionen med inline-størrelse, var vores test mindre afgørende. Det kan skyldes Box Sizing Module Level 3 specs Working Draft-status.max-content: Den iboende foretrukne bredde, hvilket betyder, at elementet strækker teksten ud, så længe den overhovedet kan være, og får boksen til at være så lang som teksten.min-content: Den iboende mindste bredde, hvilket betyder, at elementets boks reduceres til minimumsstørrelsen på dets indhold. Boksen vil være størrelsen på den største tekststreng.
Demo
Browsersupport
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| Ingen | 79+ | 41+ | 57 | 12.1+ | 44+ |
| Android Chrome | Android Firefox | Android-browser | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 12.2+ | 59+ |
Bemærk, at support til brug af følgende funktioner kan afvige fra support af ejendommen:
fit-content()max-content()min-content()
Mere information
- CSS logiske egenskaber og værdier niveau 1 specifikation (Editor's Draft)
- MDN-dokumentation
- CSS logiske egenskaber` (CSS-tricks)
- Forståelse af logiske egenskaber og værdier (Smashing Magazine)
- CSS logiske egenskaber (Adrian Roselli)
- Min. Og maks. Indholdsstørrelse i CSS Grid (Jen Simmons, video)
- Tovejs vandrette regler i CSS (Hussein Al Hammad)