Logiske egenskaper beskriver layout basert på innholdets skrivretning (start/slutt, inline/blokk) i stedet for fysiske retninger (venstre/høyre/topp/bunn). Dette gjør at et enkelt stilark automatisk tilpasses språk som skrives fra høyre til venstre (arabisk, hebraisk) eller fra topp til bunn.
{ : ; : ; : left; : solid; }
{
: ;
: ;
: start;
: solid;
}
margin-inline: 1rem; /* left + right in LTR (both inline sides) */
margin-block: 2rem; /* top + bottom */
margin-inline-start: 1rem; /* the "start" inline edge (left LTR / right RTL) */
padding-block-end: 1rem; /* bottom in horizontal writing */
inset-inline-start: 0; /* logical version of left/right for positioning */
Med fysiske egenskaper krever støtte for arabisk et helt nytt sett med speilvendte stiler (margin-left → margin-right, osv.) bak [dir="rtl"]. Med logiske egenskaper fungerer det samme CSS — sett dir="rtl" på html-elementet og margin-inline-start flipper automatisk til høyre side:
<html dir="rtl"> <!-- the entire layout mirrors correctly, no CSS changes -->
Logiske egenskaper håndterer også vertikale skriftsystemer (f.eks. noe østasiatisk typografi) og gjør margin-inline: auto til en enkel måte å sentrere på uavhengig av retning.
For alle produkter som lanseres på flere språk, eliminerer logiske egenskaper behovet for å vedlikeholde speilvendte RTL-stilark — ett sett med regler tilpasses skrivretningen.
Self for nettsted som kun bruker LTR er de en renere mentalt modell (start/slutt, inline/blokk), og de anbefales i økende grad som standard i moderne CSS.