Logical Properties

Definition

Propriétés CSS basées sur le flux de lecture (inline/block) au lieu de la direction physique (left/right/top/bottom). margin-inline-start remplace margin-left et s'adapte automatiquement aux langues RTL.

Analogie

Comme dire 'devant' et 'derrière' au lieu de 'nord' et 'sud' : ça s'adapte selon l'orientation.

Exemple de code

.element {
  margin-block: 1rem;    /* haut/bas */
  padding-inline: 2rem;  /* gauche/droite en LTR */
  border-inline-start: 3px solid;
  inset-inline: 0;       /* left + right */
}

Cas d'usage

Construire des interfaces internationalisables qui supportent les langues RTL (arabe, hébreu) sans CSS additionnel.

Termes lies