Logische eigenschappen beschrijven layout in termen van de inhoudsstroomrichting (start/end, inline/block) in plaats van fysieke richtingen (links/rechts/boven/onder). Hierdoor past een enkele stylesheet zich automatisch aan aan talen die van rechts naar links (Arabisch, Hebreeuws) of van boven naar beneden geschreven worden.
{ : ; : ; : 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 */
Met fysieke eigenschappen betekent het ondersteunen van Arabisch het schrijven van een heel tweede set gespiegelde stijlen (margin-left → margin-right, enzovoort) achter [dir="rtl"]. Met logische eigenschappen werkt dezelfde CSS gewoon — stel dir="rtl" in op de html en margin-inline-start spiegelt zich automatisch naar de rechterkant:
<html dir="rtl"> <!-- the entire layout mirrors correctly, no CSS changes -->
Logische eigenschappen verwerken ook verticale schrijfmodi (bijvoorbeeld bepaalde Oost-Aziatische typografie) en maken margin-inline: auto een schone manier om in te centreren ongeacht de schrijfrichting.
Voor elk product dat in meerdere talen wordt uitgebracht, elimineren logische eigenschappen de noodzaak om gespiegelde RTL-stylesheets te onderhouden — één set regels past zich aan de schrijfrichting aan.
Zelfs voor sites die alleen LTR zijn, zijn ze een schoner mentaal model (start/end, inline/block), en ze worden steeds vaker aanbevolen als standaard in modern CSS.