Inline-størrelse - CSS-triks

Innholdsfortegnelse

inline-sizeer en logisk egenskap som definerer bredden på et element når skrivemodus er vannrett, eller høyden på elementet når det writing-modeer loddrett.

.element ( inline-size: 700px; writing-mode: vertical-lr; )

Som du kanskje har gjettet av eksemplet ovenfor, writing-modeendrer egenskapen retningen på teksten og layoutflyten med 90 grader. Det er to hovedgrunner til at du vil gjøre det.

Først, som et designvalg, vil du kanskje vise vertikal tekst på et element, si en overskrift:

Den andre - og sannsynligvis viktigste - grunnen til at du kanskje vil bruke en logisk eiendom som inline-størrelse, er å imøtekomme internasjonalisering på et nettsted. Mange østasiatiske skript som kinesisk, japansk og koreansk kan skrives horisontalt eller vertikalt. Ved hjelp av logiske egenskaper kan vi gi den riktige størrelsesretningen for elementer basert på brukerens skrivemodus.

Jen Simmons har en artikkel og presentasjon som går dypere inn i CSS-skrivemodus.

Hvorfor kan vi ikke bare bruke den pålitelige widtheiendommen?

Du kan! Imidlertid vil du kanskje strekke deg etter i inline-sizestedet hvis du er bekymret for konteksten for innholdet ditt som endres basert på brukerens språk. widther en fysisk dimensjon, så når skrivemodusen endres, beholder et element sin horisontale bredde og bryter et layout når det er satt opp til å være vertikalt. Som logiske egenskaper inline-sizekan de svare på disse endringene og bruke bredde i riktig retning.

For eksempel, hvis et avsnittselement er 400px bredt med bredde, når skrivemodus er satt til vertical-lr, vil innholdet rotere og endre oppsettet, men det avsnittet forblir 400px bredt i stedet for 400px høyt.

Se det? Vel, inline-sizeer smart! Det endres fra bredde til høyde, avhengig av writing-modeverdien.

Syntaks

inline-size:
  • Første: auto
  • Gjelder for: samme som heightogwidth
  • Arvet: nei
  • Prosentandel: som for den tilsvarende fysiske egenskapen
  • Beregnet verdi: samme som heightogwidth
  • Animasjonstype: etter beregnet verditype

Verdier

/* 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 innebygde størrelse vil overholde størrelsen på det overordnede elementet.
  • fit-content(): Denne funksjonen gjør at en beholder kan vokse til ønsket størrelse, og deretter lage tekstpakken, og effektivt feste innholdet til den angitte størrelsesverdien. Den kan brukes på Grid-containere, så vel som boksstørrelse, og mens caniuse viser sterk støtte for funksjonen med inline-størrelse, var testingen vår mindre avgjørende. Det kan skyldes Box Sizing Module Level 3 spesifikasjonens Working Draft-status.
  • max-content: Den egentlige foretrukne bredden, noe som betyr at elementet strekker teksten ut så lenge den muligens kan være, og vil gjøre at boksen blir så lang som teksten.
  • min-content: Den indre minimumsbredden, som betyr at elementets ramme reduseres til minimumsstørrelsen på innholdet. Boksen vil være på størrelse med den største tekststrengen.

Demo

Nettleserstøtte

DVS Kant Firefox Chrome Safari Opera
Nei 79+ 41+ 57 12.1+ 44+
Android Chrome Android Firefox Android-nettleser iOS Safari Opera Mobile
85+ 79+ 81+ 12.2+ 59+
Kilde: caniuse

Merk at støtte for bruk av følgende funksjoner kan avvike fra støtte for eiendommen:

  • fit-content()
  • max-content()
  • min-content()

Mer informasjon

  • CSS logiske egenskaper og verdier nivå 1 spesifikasjon (Editor's Draft)
  • MDN-dokumentasjon
  • CSS Logical Properties` (CSS-Tricks)
  • Forstå logiske egenskaper og verdier (Smashing Magazine)
  • CSS Logical Properties (Adrian Roselli)
  • Min og maks innholdsstørrelse i CSS Grid (Jen Simmons, video)
  • Toveis horisontale regler i CSS (Hussein Al Hammad)

Interessante artikler...