Inline-formaat - CSS-trucs

Anonim

inline-sizeis een logische eigenschap die de breedte van een element definieert wanneer de schrijfmodus horizontaal is, of de hoogte van het element wanneer het writing-modeverticaal is.

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

Zoals je misschien al hebt geraden door het bovenstaande voorbeeld, writing-modeverandert de eigenschap de oriëntatie van de tekst en de lay-outstroom met 90 graden. Er zijn twee belangrijke redenen waarom u dat zou willen doen.

Ten eerste wilt u als ontwerpkeuze misschien verticale tekst op een element weergeven, bijvoorbeeld een koptekst:

De tweede - en waarschijnlijk belangrijkste - reden waarom u een logische eigenschap zoals inline-size zou willen gebruiken, is om internationalisering op een site mogelijk te maken. Veel Oost-Aziatische scripts, zoals Chinees, Japans en Koreaans, kunnen horizontaal of verticaal worden geschreven. Met behulp van logische eigenschappen kunnen we de juiste maatrichting van elementen geven op basis van de schrijfmodus van de gebruiker.

Jen Simmons heeft een artikel en presentatie die dieper ingaan op CSS-schrijfmodi.

Waarom kunnen we het vertrouwde widtheigendom niet gewoon gebruiken ?

Jij kan! Misschien wilt u in inline-sizeplaats daarvan reiken als u zich zorgen maakt over de context van uw inhoud die verandert op basis van de taal van een gebruiker. widthis een fysieke dimensie, dus wanneer de schrijfmodus verandert, behoudt een element zijn horizontale breedte, waardoor een lay-out wordt verbroken wanneer het verticaal is ingesteld. Logische eigenschappen inline-sizekunnen op die veranderingen reageren en breedte in de juiste richting toepassen.

Als een alinea-element bijvoorbeeld 400 px breed is met gebruik van de breedte en de schrijfmodus is ingesteld op vertical-lr, zal de inhoud roteren, waardoor de lay-out verandert, maar die alinea blijft 400 px breed in plaats van 400 px hoog.

Zie dat? Nou, inline-sizeis slim! Het verandert van breedte naar hoogte, afhankelijk van de writing-modewaarde.

Syntaxis

inline-size:
  • Eerste: auto
  • Geldt voor: hetzelfde als heightenwidth
  • Overgenomen: nee
  • Percentages: zoals voor de bijbehorende fysieke eigenschap
  • Berekende waarde: hetzelfde als heightenwidth
  • Animatietype: op type berekende waarde

Waarden

/* 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​
  • fit-content(): Met deze functie kan een container groeien tot een gewenste grootte en vervolgens de tekst laten teruglopen, waardoor de inhoud effectief wordt vastgeklemd tot de opgegeven grootte. Het kan worden gebruikt op Grid-containers, evenals op box-sizing, en hoewel caniuse sterke ondersteuning toont voor de functie met inline-size, waren onze tests minder overtuigend. Dat kan te wijten zijn aan de Working Draft-status van de Box Sizing Module Level 3-specificatie.
  • max-content: De intrinsieke voorkeursbreedte, wat inhoudt dat het element de tekst zo lang mogelijk uitrekt en ervoor zorgt dat het kader net zo lang is als de tekst.
  • min-content: De intrinsieke minimale breedte, wat betekent dat de doos van het element wordt verkleind tot de minimale grootte van de inhoud. Het vak heeft de grootte van de grootste reeks tekst.

Demo

Browser-ondersteuning

D.W.Z Rand Firefox Chrome Safari Opera
Nee 79+ 41+ 57 12.1+ 44+
Android Chrome Android Firefox Android-browser iOS Safari Opera Mobile
85+ 79+ 81+ 12.2+ 59+
Bron: caniuse

Houd er rekening mee dat ondersteuning voor het gebruik van de volgende functies kan verschillen van ondersteuning van de eigenschap:

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

Meer informatie

  • CSS logische eigenschappen en waarden Level 1 specificatie (Editor's Draft)
  • MDN-documentatie
  • CSS logische eigenschappen '(CSS-trucs)
  • Logische eigenschappen en waarden begrijpen (Smashing Magazine)
  • CSS logische eigenschappen (Adrian Roselli)
  • Min & Max Content Sizing in CSS Grid (Jen Simmons, video)
  • Bidirectionele horizontale regels in CSS (Hussein Al Hammad)