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

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

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.

.block {
  // margin-left et margin-right peuvent être regroupés
  margin-inline: 1rem;

  // padding-top et padding-bottom peuvent être regroupés
  padding-block: 2rem 3rem;
｝

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.

.block {
  margin-block-start: 1rem;            // margin-top
  margin-inline-start: 2rem;           // margin-left

  padding-block-end: 1rem;             // padding-bottom
  padding-inline-end: 2rem;            // padding-right

  border-inline-start: 1px solid #000; // border-left
  border-end-start-radius: .5rem;      // border-bottom-left-radius
｝

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.

.block {
  block-size: 20rem;      // height
  inline-size: 50%;       // width 
  min-inline-size: 10rem; // min-width
  max-inline-size: 40rem; // max-width
}

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.

.before {
  position: absolute;
  top: 2rem;
  left: 1rem;
  right: 1rem;
  bottom: 3rem;
}

.after {
  position: absolute;
  inset: 2rem 1rem 3rem;
}

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

• Documentation : CSS logical properties and values
• Article : Deploying CSS Logical Properties On Web Apps
• Spécification W3C : CSS Logical Properties and Values Level 1

Outils pour migrer

• Github : stylelint-use-logical
• Github Gist : Convert standard CSS properties into logical properties with JS

Et vous ?

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