Logiska egenskaper beskriver layout i termer av innehållets flödesriktning (start/slut, inline/block) istället för fysiska riktningar (vänster/höger/topp/botten). Detta gör ett enda stilark automatiskt anpassat till språk som skrivs höger-till-vänster (arabiska, hebreiska) eller topp-till-botten.
{ : ; : ; : 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 fysiska egenskaper innebar att stödja arabiska att skriva en helt ny uppsättning speglade stilar (margin-left → margin-right, osv.) bakom [dir="rtl"]. Med logiska egenskaper, samma CSS fungerar helt enkelt — ställ in dir="rtl" på html och margin-inline-start vänds automatiskt till höger sida:
<html dir="rtl"> <!-- the entire layout mirrors correctly, no CSS changes -->
Logiska egenskaper hanterar också vertikala skrivmodi (t.ex. vissa östasiatiska typografi) och gör margin-inline: auto till ett rent sätt att centrera oavsett riktning.
För all produkt som levereras på flera språk eliminerar logiska egenskaper behovet av att underhålla speglade RTL-stilar — en uppsättning regler anpassas till skrivningsriktningen.
Även för endast LTR-webbplatser är de en renare mentalmodell (start/slut, inline/block), och de är alltmer den rekommenderade standarden i modern CSS.