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

La spécification sur les propriétés et valeurs logiques définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (padding) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.

Si vous avez consulté la page principale sur les propriétés et valeurs logiques, vous avez pu voir une grande quantité de propriétés. Cela est principalement du au fait que pour chaque marge, bordure et remplissage, il y a quatre propriétés détaillées et une propriété raccourcie.

Correspondances pour les marges, les bordures et les remplissages (padding)

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.

Propriété logique Propriété physique
border-block-end border-bottom
border-block-end-color border-bottom-color
border-block-end-style border-bottom-style
border-block-end-width border-bottom-width
border-block-start border-top
border-block-start-color border-top-color
border-block-start-style border-top-style
border-block-start-width border-top-width
border-inline-end border-right
border-inline-end-color border-right-color
border-inline-end-style border-right-style
border-inline-end-width border-right-width
border-inline-start border-left
border-inline-start-color border-left-color
border-inline-start-style border-left-style
border-inline-start-width border-left-width
border-start-start-radius border-top-left-radius
border-start-end-radius border-bottom-left-radius
border-end-start-radius border-top-right-radius
border-end-end-radius border-bottom-right-radius
margin-block-end margin-bottom
margin-block-start margin-top
margin-inline-end margin-right
margin-inline-start margin-left
padding-block-end padding-bottom
padding-block-start padding-top
padding-inline-end padding-right
padding-inline-start padding-left

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.

Propriété Objectif
border-block Définit border-color, border-style et border-width pour les deux bordures sur l'axe de bloc.
border-block-color Définit border-color pour les deux bordures sur l'axe de bloc.
border-block-style Définit border-style pour les deux bordures sur l'axe de bloc.
border-block-width Définit border-width pour les deux bordures sur l'axe de bloc.
border-inline Définit border-color, -style et -width pour les deux bordures sur l'axe en ligne.
border-inline-color Définit border-color pour les deux bordures sur l'axe en ligne.
border-inline-style Définit border-style pour les deux bordures sur l'axe en ligne.
border-inline-width Définit border-width pour les deux bordures sur l'axe en ligne.
margin-block Défnit les deux marges sur l'axe de bloc.
margin-inline Défnit les deux marges sur l'axe en ligne.
padding-block Définit le remplissage (padding) sur l'axe de bloc.
padding-inline Définit le remplissage (padding) sur l'axe en ligne.

Exemples de marges

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.

Propriétés raccourcies pour les marges

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.

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

Note : Ces propriétés raccourcies, margin-inline et margin-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

Exemples pour le remplissage

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.

Propriétés raccourcies pour le remplissage

À 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 :

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

Note : Ces propriétés raccourcies, padding-inline et padding-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

Exemples pour les bordures

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.

Propriétés raccourcies pour les bordures

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.

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

Note : Ces propriétés raccourcies, border-inline et border-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

Propriétés pour les courbures des bordures relatives au flux

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.

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

Utiliser les valeurs logiques avec les propriétés raccourcies classiques

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.