24 janvier 2024

CSS logical properties : la révolution pour l’internationalisation

Front-End

Les logical properties sont une famille de propriétés CSS permettant de s’affranchir d’une sémantique physique au profit d’une sémantique logique.

Elles offrent beaucoup d’avantages, notamment pour l’internationalisation, en échange de peu d’efforts.

Découvrons cela ensemble !

La promesse

Historiquement, nous écrivons les styles CSS avec des propriétés physiques (ex : margin-left, padding-top). Avec les propriétés physiques, un changement d’orientation de lecture implique une adaptation manuelle des styles. Par exemple lorsque l’on passe du Français à l’Arabe, il faut modifier les styles pour que les éléments qui se trouvaient à gauche, se retrouve à droite.

Les logical properties (ou propriétés logiques) permettent au style de s’adapter automatiquement avec une seule déclaration CSS. C’est-à-dire que les styles sont indépendants de l’orientation du texte.

Philosophie

Les propriétés physiques suivent des règles basées sur une vision de gauche à droite et de haut en bas. C’est une vision plutôt occidentale du monde et par conséquent qui n’est pas universelle.

Schéma représentant le modèle de boîte CSS avec les propriétés physiques
Schéma représentant le modèle de boîte CSS avec les propriétés logique

Les propriétés logiques s’affranchissent des points cardinaux et suivent des instructions basées sur des axes et des extrémités.

Propriété CSS concernées

Les familles de styles impactée par les propriétés logiques sont :

  • margin: les marges externes
  • padding : les marges internes
  • border : les bordures
  • border-radius : les coins arrondis
  • inset : les coordonnées de positionnement
  • text-align : l’alignement du texte
  • overflow / overscroll : le défilement au scroll
  • resize : le caractère redimensionnable d’un élément
  • float / clear : la mise en page flottante

Inline et Block

Les propriétés logiques s’organisent sur 2 axes :

  • inline : parallèle à l’orientation du texte (ex: horizontal en français)
  • block : perpendiculaire à l’orientation du texte (ex: vertical en français)

Exemple :

Les propriétés margin-left et margin-right peuvent être regroupées avec margin-inline.

Egalement, les propriétés padding-top et padding-bottom peuvent être regroupées avec padding-block.

Si une seule valeur est spécifiée alors les 2 extrémités auront la même valeur. Si 2 valeurs sont spécifiées alors chaque extrémité aura respectivement sa propre valeur.

exemple de code pour les propriétés logiques avec "inline" et "block"

Start et End

Les axes possèdent 2 extrémités :

  • start : le début d’un axe (ex: en haut ou à gauche français)
  • end : la fin d’un axe (ex: en bas ou à droite en français)

Exemple :

La propriété margin-top peut s’écrire margin-block-start. De même que padding-right peut s’écrire padding-inline-end.

Concernant les bordures, border-left peut être converti en border-inline-start.

exemple de code pour les propriétés logiques avec "start" et "end"

Size

Les dimensions sont représentées par size :

  • inline-size : la taille sur l’axe “inline” (ex: la largeur en français)
  • block-size : la taille sur l’axe “block” (ex: la hauteur en français)

Exemple :

L’équivalent de height est block-size et l’équivalent de width est inline-size. Pour les tailles minimales et maximales, les préfixes min et max sont toujours valables, on peut donc écrire min-inline-size ou bien max-block-size.

exemple de code pour les propriétés logiques avec "size"

Inset

La propriété inset permet de regrouper les positions en une seule déclaration.

Elle se décline aussi avec *-inline, *-block, *-start et *-end.

Exemple :

Pour définir simultanément top, left, right et bottom, tout est regroupable avec inset, qui suit la même logique de répartition des valeurs que margin ou padding.

Pour définir unitairement bottom par exemple, il est possible d’utiliser inset-block-end.

exemple de code pour les propriétés logiques avec "inset"

Conclusion

Les logical properties apportent des nouveautés utiles et de nombreux avantages :

  • Universalité : le code et le rendu s’adaptent à toutes les cultures
  • Adaptabilité : les styles s’adaptent à plus de types de mise en page
  • Lisibilité : le code est plus simple à comprendre et à organiser
  • Performance : le code est plus léger et plus rapide à interpréter

N’hésitez plus, foncez !

Envie d’en savoir plus ?

Documentation

Outils pour migrer

Et vous ?

Êtes-vous prêt.e.s à adopter les CSS logical properties et changer le web ?

Suggestions