Propriétés logiques pour les raccourcis utiles

Cet article a été mis à jour le 28 juillet 2022 pour inclure la section couvrant les anciens navigateurs.

Ce que j’aime dans les propriétés logiques, c’est la possibilité de définir des marges ou un rembourrage sur un seul axe d’un élément, tout en laissant l’autre seul. Disons que nous avons un élément sur lequel nous avons défini un rembourrage en utilisant le padding sténographie:

/* This gives us 1rem padding all the way around */
.box {
  padding: 1rem;
}

Si, plus tard, nous voulons ajuster le rembourrage seul sur l’axe des x (tout en préservant notre valeur d’origine sur l’axe des y), nous avons deux choix :

Nous pourrions utiliser padding-left et padding-right. Bien, mais plus long que notre sténographie d’origine.

.box--some-variant {
  padding-right: 2rem;
  padding-left: 2rem;
}

Nous pourrions utiliser la sténographie, mais en nous souvenant d’inclure nos valeurs d’origine.

.box--some-variant {
  padding: 1rem 2rem;
}

Je ne suis pas un grand fan de devoir répéter la valeur d’origine pour le rembourrage de l’axe y. Nous pourrait résumez ces valeurs dans des propriétés personnalisées – quelque chose comme ceci :

.box {
  padding: var(--py, 1rem) var(--px, 1rem);
}

.box--some-variant {
  --px: 2rem;
}

Par contre, il existe une propriété logique qui permet d’ajuster le padding sur un seul axe : padding-inline fait référence au remplissage sur l’axe des x lorsque le document est en mode d’écriture de gauche à droite (par défaut) ou de droite à gauche. padding-block fait référence à l’axe des ordonnées. (Ces directions sont inversées pour un mode d’écriture vertical.)

Donc à la place on pourrait écrire :

.box {
  padding: 1rem;
}

.box--some-variant {
  padding-inline: 2rem;
}

Démo Codepen →

Il en va de même pour les marges, les bordures et bien d’autres. Et consultez le inset propriété pour un excellent raccourci de positionnement !

Les propriétés logiques sont désormais très bien prises en charge dans les navigateurs, c’est donc le bon moment pour commencer à les utiliser.

Mise à jour

Bien que la prise en charge des propriétés logiques soit très bonne dans les navigateurs modernes, comme Šime a souligné, c’est une bonne idée de polyfill ou de fournir des alternatives pour les anciens navigateurs, sinon les utilisateurs d’anciens navigateurs rencontreront des bogues de mise en page. Si vous utilisez PostCSS, le plug-in de propriétés logiques PostCSS devrait vous couvrir, sinon vous devriez envisager de tester la prise en charge à l’aide d’une requête de fonctionnalité.