Campus Design System

Appearance

CSS-logische eigenschappen begrijpen ​

CSS-logische eigenschappen zijn een krachtig hulpmiddel in webontwikkeling dat zorgt voor meer aanpasbare en flexibele lay-outs van webpagina’s. Ze hangen nauw samen met de tekstoriëntatie en de schrijfrichting van het document. In dit artikel verkennen we wat CSS-logische eigenschappen zijn, hoe ze werken en hoe ze zich verhouden tot hun fysieke tegenhangers.

De Specificatie van Logische Eigenschappen en Waarden introduceert stroom-gerelateerde mappings voor veel eigenschappen en waarden in CSS. Dit artikel introduceert de specificatie en legt stroom-gerelateerde eigenschappen en waarden uit.

Waarom hebben we logische eigenschappen nodig? ​

CSS heeft traditioneel zaken op fysieke afmetingen van het scherm gebaseerd. Zo beschrijven we vakken met width en height, positioneren items vanaf de boven- en linkerkant, laten dingen links uitlijnen, en wijzen randen, marges en opvulling toe aan top, right, bottom, left, enz. De Specificatie van Logische Eigenschappen en Waarden definieert mappings voor deze fysieke waarden naar hun logische of stroomgerelateerde tegenhangers, zoals start en end in plaats van left en right/top en bottom.

Een voorbeeld van wanneer deze mappings handig kunnen zijn, is als volgt: Stel, ik heb een lay-out met CSS Grid, de gridcontainer heeft een breedte en ik gebruik de eigenschappen align-self en justify-self om de items uit te lijnen. Deze eigenschappen zijn stroom-gerelateerd — justify-self: start lijnt het item uit aan het begin in de inline-dimensie, align-self: start doet hetzelfde in de block-dimensie.

html
<div class="grid grid-cols-6 grid-rows-4 w-s">
  <div class="col-span-2">One</div>
  <div class="col-start-4 row-span-2">Two</div>
  <div class="col-start-5 col-span-2 row-span-2">Three</div>
  <div class="col-start-1 row-start-3 col-span-2 row-span-2">Four</div>
</div>
One
Two
Three
Four

Als ik nu de schrijfrichting van deze component wijzig naar vertical-rl met de writing-mode-rl utility-class, blijft de uitlijning hetzelfde werken. De inline-dimensie loopt nu verticaal en de block-dimensie horizontaal. De grid ziet er echter anders uit, omdat de breedte van de container een horizontale maat is, gebonden aan fysieke afmetingen en niet aan de logische of stroomgerelateerde tekstoriëntatie.

html
<div class="writing-mode-rl grid grid-cols-6 grid-rows-4 w-s">
  <div class="col-span-2">One</div>
  <div class="col-start-4 row-span-2">Two</div>
  <div class="col-start-5 col-span-2 row-span-2">Three</div>
  <div class="col-start-1 row-start-3 col-span-2 row-span-2">Four</div>
</div>
One
Two
Three
Four

Als we in plaats van de width-eigenschap de logische eigenschap inline-size gebruiken, werkt de component op dezelfde manier, ongeacht de schrijfrichting.

html
<div class="writing-mode-rl grid grid-cols-6 grid-rows-4 inline-size-s">
  <div class="col-span-2">One</div>
  <div class="col-start-4 row-span-2">Two</div>
  <div class="col-start-5 col-span-2 row-span-2">Three</div>
  <div class="col-start-1 row-start-3 col-span-2 row-span-2">Four</div>
</div>
One
Two
Three
Four

Als je werkt met een site in een andere schrijfrichting dan horizontaal van boven naar beneden, of schrijfrichtingen gebruikt om creatieve redenen, is het zinvol om met de stroom van de inhoud rekening te houden.

Block- en inline-dimensies ​

Een belangrijk concept bij het werken met stroomgerelateerde eigenschappen en waarden zijn de twee dimensies: block en inline. Zoals hierboven te zien is, gebruiken nieuwere CSS-lay-outmethoden zoals Flexbox en Grid Layout de block- en inline-concepten in plaats van rechts en links/boven en onder bij het uitlijnen van items.

De inline-dimensie is de dimensie waarin een regel tekst in de gebruikte schrijfrichting loopt. In een Engels document dat horizontaal van links naar rechts loopt, of een Arabisch document dat horizontaal van rechts naar links loopt, is de inline-dimensie horizontaal. Bij een verticale schrijfrichting (zoals in een Japans document) is de inline-dimensie verticaal, omdat regels in die schrijfrichting verticaal lopen.

De block-dimensie is de andere dimensie en geeft de richting aan waarin blokken — zoals alinea’s — elkaar opvolgen. In Engels en Arabisch lopen deze verticaal, terwijl ze in elke verticale schrijfrichting horizontaal lopen.

Het onderstaande diagram toont de inline- en block-richtingen in een horizontale schrijfrichting:

Diagram dat de inline-as horizontaal toont, en de block-as verticaal.

Dit diagram toont de block- en inline-as in een verticale schrijfrichting:

Diagram dat de block-as horizontaal toont en de inline-as verticaal.

💡 Tip

In het Campus Design System hebben we het gebruik van logische eigenschappen voor marges, opvulling, randen en insets gestroomlijnd door utility-classes te introduceren. Deze aanpak elimineert de noodzaak om lange logische eigenschapsnamen te typen, waardoor je efficiënter kunt werken.

Gebruik deze utility-classes door het afkortingspatroon te volgen:

  • Begin met de eerste letter van elk onderdeel van de logische eigenschap:

    • "block" wordt "b"
    • "inline" wordt "i"
    • "start" wordt "s"
    • "end" wordt "e"

  • Combineer deze afkortingen om de klassen te maken die je nodig hebt. Bijvoorbeeld:

    • Gebruik "border-bs-*" voor "border-block-start"
    • Pas "p-ie-*" toe voor "padding-inline-end"
    • Gebruik "m-i-*" voor "margin-inline"

Deze verkorte notatie vereenvoudigt je code en maakt je werk efficiënter binnen ons design system. Geniet van het gemak van deze utility-classes voor logische eigenschappen!