Propriétés logiques pour les marges, les bordures et les remplissages

La spécification détaille les correspondances entre les valeurs logiques et les valeurs physiques. Dans le tableau qui suit,on liste les correspondances lorsque le mode d'écriture utilisé est horizontal-tb et où la direction du texte va de gauche à droite. L'axe en ligne est donc horizontal, dirigé de gauche à droite et margin-inline-start est équivalent à margin-left.

Si on avait utilisé un mode d'écriture horizontal-tb orienté de droite à gauche, margin-inline-start aurait correspondu à margin-right. Pour un mode d'écriture vertical, elle aurait correspondu à margin-top.

De nouvelles propriétés raccourcies sont également apparues et permettent de manipuler les deux extrêmités d'un même axe. Ces propriétés raccourcies n'ont pas de propriété physique équivalente.

Les quatre propriétés logiques margin-inline-start, margin-inline-end, margin-block-start et margin-inline-end peuvent être utilisées à la place des propriétés physiques habituelles afin de définir une marge.

Dans l'exemple qui suit, on a créé deux boîtes et définit une marge différente pour chaque côté. On a aussi ajouté un conteneur supplémentaire avec une bordure afin de mieux visualiser la bordure.

Une boîte utilise les propriétés physiques et la seconde les propriétés logiques. Vous pouvez modifier la valeur de la propriété direction (la changer en rtl par exemple) : la première boîte conservera les mêmes marges tandis que la seconde verra ses marges en ligne échangées.

Vous pouvez également modifier la propriété writing-mode pour la passer de horizontal-tb à vertical-rl. Là aussi, vous pourrez voir les marges rester les mêmes pour la première boîte et passer d'un côté à l'autre pour la seconde.

Avec les propriétés logiques, on peut définir les deux côtés en ligne et les deux côtés en bloc à l'aide d'une propriété et on a donc de nouvelles propriétés raccourcies : margin-inline et margin-block. Ces deux propriétés s'utilisent avec deux valeurs : la première sera appliquée au côté du début pour l'axe et la deuxième au côté de fin. Si une seule valeur est utilisée, elle sera appliquée aux deux côtés.

Avec un mode d'écriture horizontal, cette déclaration CSS appliquerait une marge de 5 pixels sur le côté haut de la boîte et une marge de 10 pixels sur le bas de la boîte.

.box {
  margin-block: 5px 10px;
}

Pour le remplissage, ce sont les propriétés logiques padding-inline-start, padding-inline-end, padding-block-start et padding-inline-end qui ont été ajoutées et qui peuvent être utilisées en lieu et place de leur équivalent physique.

Dans l'exemple suivant, on dispose de deux boîtes, la première possède des remplissages définis avec des propriétés physiques et la seconde avec des propriétés logiques. En utilisant un mode d'écriture horizontal-tb, les deux boîtes auront la même apparence.

En modifiant la propriété direction avec la valeur rtl, les boîtes seront affichées de droite à gauche. Le remplissage de la première boîte restera à la même place et celui de la deuxième boîte changera de côté.

Vous pouvez aussi modifier la valeur de la propriété writing-mode pour la passer de horizontal-tb à vertical-rl. Là encore, rien ne change pour la première boîte mais pour la seconde, les remplissages se trouvent échangés.

À l'instar des marges, deux propriétés raccourcies ont été ajoutées padding-inline et padding-block. Elles permettent, respectivement, de définir le remplissage pour les deux côtés sur l'axe en ligne et sur l'axe en bloc.

Avec un mode d'écriture horizontal, cette déclaration CSS appliquera un remplissage de 5px sur le haut de la boîte et un remplissage de 10 pixels en bas de la boîte :

.box {
  padding-block: 5px 10px;
}

Les propriétés relatives aux bordures fournissent une grande quantité de propriétés tant logiques que physiques (pour la couleur, la largeur, le style, pour chaque côté, pour les propriétés raccourcies). De la même façon qu'on a des équivalences avec les propriétés physiques pour les marges et les remplissages, on a également des propriétés logiques pour les bordures.

L'exemple ci-après utilise certaines propriétés détaillées et propriétés raccourcies. Comme précédemment, vous pouvez modifier les valeurs des propriétés direction et writing-mode pour observer les impacts.

Il y a des propriétés raccourcies avec deux valeurs pour paramétrer la largeur, le style et la couleur de la bordure pour les côtés sur l'axe en ligne ou pour les côtés sur l'axe de bloc. Le fragment de code qui suit, si on l'utilise avec un mode d'écriture horizontal, fournira une bordure verte de 2 pixels sur un trait plein en haut et en bas de la boîte et une bordure pointillée violette de 4 pixels sur les côtés gauche et droit.

.box {
  border-block: 2px solid green;
  border-inline-width: 4px;
  border-inline-style: dotted;
  border-inline-color: rebeccapurple;
}

La spécification a également ajouté des propriétés relatives au flux pour les propriétés détaillées associées à border-radius. Ces propriétés n'ont pas encore (décembre 2018) été implémentées par les différents navigateurs. L'exemple qui suit, avec un mode d'écriture horizontal, fournira une bordure en haut à droite avec un rayon de courbure de 1em, une bordure en bas à droite sans rayon de courbure, une bordure en bas à gauche avec un rayon de courbure de 20 pixels et une bordure courbée avec un rayon de 40 pixels pour le coin supérieur gauche.

.box {
  border-end-start-radius: 1em;
  border-end-end-radius: 0;
  border-start-end-radius: 20px;
  border-start-start-radius: 40px;
}

La spécification définit une suggestion qui pourrait être utilisée afin de manipuler les propriétés raccourcies (margin par exemple) avec des valeurs logiques. Toutefois, le consensus n'a pas encore été atteint sur la résolution de ce point et est discuté au travers de cette issue.

À l'heure actuelle (décembre 2018), les propriétés raccourcies margin, padding et border ne fonctionent qu'avec les valeurs physiques. Aussi, si respecter le flux du document est primordial et que vous devez utiliser les valeurs logiques, vous devrez recourir aux propriétés détaillées afin d'utiliser les valeurs logiques.