Propriétés logiques décrivent la mise en page en termes de direction du flux du contenu (début/fin, inline/bloc) au lieu de directions physiques (gauche/droite/haut/bas). Cela permet à une seule feuille de style de s'adapter automatiquement aux langues écrites de droite à gauche (arabe, hébreu) ou de haut en bas.
{ : ; : ; : 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 */
Avec les propriétés physiques, supporter l'arabe signifie écrire tout un second ensemble de styles inversés (margin-left → margin-right, etc.) derrière [dir="rtl"]. Avec les propriétés logiques, le même CSS fonctionne simplement — définissez dir="rtl" sur le html et margin-inline-start bascule automatiquement vers la droite :
<html dir="rtl"> <!-- the entire layout mirrors correctly, no CSS changes -->
Les propriétés logiques gèrent également les modes d'écriture verticaux (p. ex. certaines typographies d'Asie de l'Est) et rendent margin-inline: auto un moyen épuré de centrer indépendamment de la direction.
Pour tout produit qui existe dans plusieurs langues, les propriétés logiques éliminent le besoin de maintenir des feuilles de style RTL inversées — un ensemble de règles s'adapte à la direction d'écriture.
Même pour les sites LTR uniquement, c'est un modèle mental plus épuré (début/fin, inline/bloc), et c'est de plus en plus la valeur par défaut recommandée dans le CSS moderne.