Propriétés Logiques CSS Niveau 2 : Construire un Web Véritablement Mondial avec un Support Amélioré des Modes d'Écriture

Pendant des décennies, les développeurs web ont construit des mises en page en utilisant un vocabulaire ancré dans le monde physique : top, bottom, left, et right. Nous définissions un margin-left, un padding-top, et un border-right. Ce modèle mental nous a bien servi lorsque le web était principalement un support de gauche à droite et de haut en bas. Cependant, le web est mondial. C'est une plateforme pour toutes les langues et cultures, dont beaucoup ne suivent pas ce simple flux directionnel.

Des langues comme l'arabe et l'hébreu s'écrivent de droite à gauche. Le japonais et le chinois traditionnels peuvent s'écrire verticalement, de haut en bas et de droite à gauche. Forcer un modèle CSS physique, de gauche à droite, sur ces systèmes d'écriture entraîne des mises en page cassées, une expérience utilisateur frustrante et une montagne de surcharges de code. C'est là qu'interviennent les Propriétés et Valeurs Logiques CSS, représentant un changement de paradigme fondamental, passant des directions physiques à des directions logiques, relatives au flux. Alors que le Niveau 1 a posé les bases, les Propriétés Logiques CSS Niveau 2 complètent le tableau, en fournissant les outils dont nous avons besoin pour construire des interfaces utilisateur véritablement universelles et conscientes du mode d'écriture.

Ce guide complet vous plongera au cœur des améliorations apportées par le Niveau 2. Nous commencerons par un rappel des concepts de base, puis nous explorerons les nouvelles propriétés et valeurs qui comblent les lacunes, et enfin, nous mettrons tout cela en pratique en construisant un composant qui s'adapte de manière transparente à n'importe quel mode d'écriture. Préparez-vous à changer à jamais votre façon de concevoir la mise en page CSS.

Rappel Rapide : Les Concepts Clés des Propriétés Logiques (Niveau 1)

Avant de pouvoir apprécier les ajouts du Niveau 2, nous devons avoir une solide compréhension des fondations posées par le Niveau 1. L'ensemble du système repose sur deux concepts clés : le mode d'écriture et les axes de bloc et en ligne qui en résultent.

Les Quatre Modes d'Écriture

La propriété CSS writing-mode détermine la direction dans laquelle le texte est disposé. Bien que nous tenions souvent la valeur par défaut pour acquise, il existe plusieurs valeurs qui changent fondamentalement la façon dont le contenu s'écoule sur la page :

• horizontal-tb : C'est la valeur par défaut pour la plupart des langues occidentales. Le texte s'écoule horizontalement (axe en ligne) de gauche à droite (ou de droite à gauche selon la direction), et les lignes s'empilent de haut en bas (axe de bloc).
• vertical-rl : Utilisé pour la typographie traditionnelle d'Asie de l'Est (par ex., japonais, chinois). Le texte s'écoule verticalement de haut en bas (axe en ligne), et les lignes s'empilent de droite à gauche (axe de bloc).
• vertical-lr : Similaire au précédent, mais les lignes s'empilent de gauche à droite (axe de bloc). Moins courant, mais utilisé dans certains contextes comme l'écriture mongole.
• sidelong-rl / sidelong-lr : Ces valeurs sont pour des cas d'utilisation spécifiques où vous souhaitez coucher les glyphes sur le côté. Elles sont moins courantes dans le contenu web général.

Le Concept Crucial : Axe de Bloc vs Axe en Ligne

C'est le concept le plus important à saisir. Dans un monde logique, nous arrêtons de penser en termes de « vertical » et « horizontal » et commençons à penser en termes d'axes de bloc et en ligne. Leur orientation dépend entièrement du writing-mode.

• L'Axe en Ligne est la direction dans laquelle le texte s'écoule à l'intérieur d'une seule ligne.
• L'Axe de Bloc est la direction dans laquelle les nouvelles lignes sont empilées.

Voyons comment cela se manifeste :

• En anglais standard (writing-mode: horizontal-tb) : L'axe en ligne est horizontal, et l'axe de bloc est vertical.
• En japonais traditionnel (writing-mode: vertical-rl) : L'axe en ligne est vertical, et l'axe de bloc est horizontal.

Parce que ces axes peuvent changer de direction, des propriétés comme width et height deviennent ambiguës. Est-ce que width est la taille le long de l'axe horizontal ou de l'axe en ligne ? Les propriétés logiques résolvent cette ambiguïté. Nous avons maintenant un début (start) et une fin (end) pour chaque axe :

• block-start : Le « haut » en anglais, mais le « droite » en japonais vertical.
• block-end : Le « bas » en anglais, mais la « gauche » en japonais vertical.
• inline-start : La « gauche » en anglais, mais le « haut » en japonais vertical.
• inline-end : La « droite » en anglais, mais le « bas » en japonais vertical.

Correspondance des Propriétés Physiques et Logiques (Niveau 1)

Le Niveau 1 a introduit un ensemble complet de correspondances entre les propriétés physiques et logiques. Voici quelques exemples clés :

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (pour le positionnement) → inset-inline-start / inset-inline-end
• top / bottom (pour le positionnement) → inset-block-start / inset-block-end

Le Niveau 1 nous a également donné des raccourcis utiles comme margin-inline (pour le début et la fin) et padding-block (pour le début et la fin).

Bienvenue au Niveau 2 : Nouveautés et Enjeux

Bien que le Niveau 1 ait été un pas de géant, il laissait quelques lacunes notables. Certaines propriétés CSS fondamentales comme float, clear, et resize n'avaient pas d'équivalents logiques. De plus, des propriétés comme border-radius ne pouvaient pas être contrôlées logiquement, forçant les développeurs à se rabattre sur les propriétés physiques pour un style plus fin. Cela signifiait que vous pouviez construire une mise en page à 90% avec des propriétés logiques, mais que vous auriez encore besoin de surcharges physiques pour différents modes d'écriture, ce qui allait partiellement à l'encontre de l'objectif.

Les Propriétés Logiques CSS Niveau 2 comblent directement ces lacunes. Il ne s'agit pas d'introduire un nouveau système radical, mais de compléter celui commencé au Niveau 1. Il y parvient de deux manières principales :

1. Introduire de nouvelles propriétés et valeurs logiques pour des fonctionnalités CSS plus anciennes qui étaient intrinsèquement physiques (comme float).
2. Ajouter des correspondances de propriétés logiques pour des raccourcis complexes qui étaient auparavant ignorés (comme border-radius).

Avec le Niveau 2, la vision d'un système de stylisation entièrement relatif au flux est presque complète, nous permettant de construire des composants complexes, esthétiques et robustes qui fonctionnent partout, pour tout le monde, sans hacks ni surcharges.

Plongée en Profondeur : Nouvelles Valeurs et Propriétés Logiques du Niveau 2

Explorons les ajouts les plus percutants que le Niveau 2 apporte à notre boîte à outils de développeur. Ce sont les outils qui comblent les lacunes et permettent une conception de composants véritablement universelle.

Float et Clear : La Révolution Logique

La propriété float a été une pierre angulaire de la mise en page CSS pendant des années, mais ses valeurs, left et right, sont la définition même de la direction physique. Si vous faites flotter une image à gauche d'un paragraphe en anglais, cela semble correct. Mais passez la direction du document en droite-à-gauche (RTL) pour l'arabe, et l'image se retrouve du « mauvais » côté du bloc de texte. Elle devrait être à droite, qui est le début de la ligne.

Le Niveau 2 introduit deux nouveaux mots-clés logiques pour la propriété float :

• float: inline-start; Fait flotter un élément au début de la direction en ligne. Dans les langues LTR, c'est la gauche. Dans les langues RTL, c'est la droite. Dans un mode d'écriture vertical-rl, c'est le haut.
• float: inline-end; Fait flotter un élément à la fin de la direction en ligne. En LTR, c'est la droite. En RTL, c'est la gauche. En vertical-rl, c'est le bas.

De même, la propriété clear, utilisée pour contrôler l'habillage du contenu autour des éléments flottants, obtient ses équivalents logiques :

• clear: inline-start; Annule les flottements du côté inline-start.
• clear: inline-end; Annule les flottements du côté inline-end.

C'est un changement majeur. Vous pouvez maintenant créer des mises en page classiques avec image et habillage de texte qui s'adaptent automatiquement à n'importe quelle direction de langue sans une seule ligne de CSS supplémentaire.

Contrôle Amélioré avec le Redimensionnement Logique

La propriété resize, couramment utilisée sur un textarea, permet aux utilisateurs de redimensionner un élément. Ses valeurs traditionnelles sont horizontal, vertical, et both. Mais que signifie « horizontal » dans un mode d'écriture vertical ? Cela signifie toujours redimensionner le long de l'axe horizontal physique, ce qui pourrait ne pas être l'intention de l'utilisateur ou du designer. L'utilisateur veut probablement redimensionner l'élément le long de son axe en ligne pour rendre les lignes plus longues ou plus courtes.

Le Niveau 2 introduit des valeurs logiques pour resize :

• resize: inline; Permet le redimensionnement le long de l'axe en ligne.
• resize: block; Permet le redimensionnement le long de l'axe de bloc.

Utiliser resize: block; sur un textarea en anglais permet à l'utilisateur de l'agrandir en hauteur. L'utiliser dans un mode d'écriture vertical permet à l'utilisateur de l'élargir (ce qui correspond à la direction de bloc). Ça fonctionne, tout simplement.

`caption-side` : Positionnement Logique pour les Légendes de Tableau

La propriété caption-side détermine l'emplacement de la caption d'un tableau. Les anciennes valeurs étaient top et bottom. Encore une fois, elles sont physiques. Si l'intention d'un designer est de placer la légende « avant » le contenu du tableau, top fonctionne pour les modes d'écriture horizontaux. Mais dans un mode vertical-rl, le « début » du flux de bloc est à droite, pas en haut.

Le Niveau 2 fournit la solution logique :

• caption-side: block-start; Place la légende au début du flux de bloc.
• caption-side: block-end; Place la légende à la fin du flux de bloc.

`text-align` : Une Valeur Logique Fondamentale

Bien que les valeurs start et end pour text-align existent depuis un certain temps, elles font partie intégrante de la philosophie des propriétés logiques et méritent d'être rappelées. Utiliser text-align: left; est une erreur courante qui cause immédiatement des problèmes de mise en page dans les langues RTL. L'approche correcte et moderne est de toujours utiliser :

• text-align: start; Aligne le texte au début de la direction en ligne.
• text-align: end; Aligne le texte à la fin de la direction en ligne.

Le Joyau de la Couronne du Niveau 2 : `border-radius` Logique

L'ajout le plus significatif et puissant du Niveau 2 est peut-être l'ensemble de propriétés pour contrôler logiquement les rayons de bordure. Auparavant, si vous vouliez qu'une carte ait des coins arrondis uniquement en « haut », vous utiliseriez border-top-left-radius et border-top-right-radius. Cela ne fonctionne plus du tout dans un mode d'écriture vertical, où les coins « supérieurs » sont maintenant les coins start-start et end-start.

Le Niveau 2 introduit quatre nouvelles propriétés détaillées qui correspondent aux quatre coins d'un élément de manière relative au flux. La convention de nommage est border-[block-edge]-[inline-edge]-radius.

• border-start-start-radius : Le coin où les côtés block-start et inline-start se rencontrent.
• border-start-end-radius : Le coin où les côtés block-start et inline-end se rencontrent.
• border-end-start-radius : Le coin où les côtés block-end et inline-start se rencontrent.
• border-end-end-radius : Le coin où les côtés block-end et inline-end se rencontrent.

Cela peut être difficile à visualiser au début, alors faisons une correspondance pour différents modes d'écriture :

Correspondance de `border-radius` en `writing-mode: horizontal-tb` (ex: Anglais)

• border-start-start-radius correspond à top-left-radius.
• border-start-end-radius correspond à top-right-radius.
• border-end-start-radius correspond à bottom-left-radius.
• border-end-end-radius correspond à bottom-right-radius.

Correspondance de `border-radius` en `writing-mode: horizontal-tb` avec `dir="rtl"` (ex: Arabe)

Ici, la direction en ligne est inversée.

• border-start-start-radius correspond à top-right-radius. (Block-start est en haut, inline-start est à droite).
• border-start-end-radius correspond à top-left-radius.
• border-end-start-radius correspond à bottom-right-radius.
• border-end-end-radius correspond à bottom-left-radius.

Correspondance de `border-radius` en `writing-mode: vertical-rl` (ex: Japonais)

Ici, les deux axes sont pivotés.

• border-start-start-radius correspond à top-right-radius. (Block-start est à droite, inline-start est en haut).
• border-start-end-radius correspond à bottom-right-radius.
• border-end-start-radius correspond à top-left-radius.
• border-end-end-radius correspond à bottom-left-radius.

En utilisant ces nouvelles propriétés, vous pouvez définir des rayons de coin qui sont sémantiquement liés au flux du contenu, et non à l'écran physique. Un coin « start-start » sera toujours le bon coin, peu importe la langue ou la direction du texte.

Implémentation Pratique : Construire un Composant Prêt pour le Monde Entier

La théorie, c'est bien, mais voyons comment cela fonctionne en pratique. Nous allons construire un simple composant de carte de profil, d'abord en utilisant les anciennes propriétés physiques, puis nous le refactoriserons pour utiliser les propriétés logiques modernes des Niveaux 1 et 2.

La carte aura une image flottant d'un côté, un titre, du texte, ainsi qu'une bordure décorative et des coins arrondis.

L'« Ancienne » Méthode : Une Carte Fragile aux Propriétés Physiques

Voici comment nous aurions pu styliser cette carte il y a quelques années :

/* --- CSS (Propriétés Physiques) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

Dans un contexte LTR anglais standard, cela semble correct. Mais si nous plaçons ceci à l'intérieur d'un conteneur avec dir="rtl" ou writing-mode: vertical-rl, la mise en page se casse. La bordure décorative est du mauvais côté, l'avatar est du mauvais côté, la marge est incorrecte, et les coins arrondis sont mal placés.

La « Nouvelle » Méthode : Une Carte Robuste aux Propriétés Logiques

Maintenant, refactorisons le même composant en utilisant les propriétés logiques. Nous tirerons parti des propriétés du Niveau 1 et des nouveaux ajouts du Niveau 2.

/* --- CSS (Propriétés Logiques) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* Le raccourci `padding` est déjà logique ! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* La puissance du Niveau 2 ! */

  border-end-start-radius: 8px; /* La puissance du Niveau 2 ! */

}

.logical-card .avatar {

  float: inline-start; /* La puissance du Niveau 2 ! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Test et Vérification

Avec ce nouveau CSS, vous pouvez insérer le composant dans n'importe quel conteneur, et il s'adaptera automatiquement.

• Dans un contexte LTR : Il aura l'air identique à la version physique originale.
• Dans un contexte RTL (dir="rtl") : L'avatar flottera à droite, sa marge sera à gauche, la bordure décorative sera à droite, et le texte sera aligné au début (à droite). Les coins arrondis seront correctement en haut à droite et en bas à droite. Ça fonctionne, tout simplement.
• Dans un contexte vertical (writing-mode: vertical-rl) : La « largeur » de la carte (maintenant sa inline-size verticale) sera de 300px. L'avatar flottera vers le « haut » (inline-start) avec une marge sur son « bas » (inline-end). La bordure décorative sera sur le côté droit (inline-start), et les coins arrondis seront en haut à droite et en haut à gauche. Le composant s'est complètement réorienté correctement sans aucune media query ou surcharge.

Support des Navigateurs et Solutions de Repli

Tout cela semble fantastique, mais qu'en est-il du support des navigateurs ? La bonne nouvelle est que le support pour les propriétés logiques du Niveau 1 est excellent sur tous les navigateurs modernes. Vous pouvez et devriez utiliser des propriétés comme margin-inline-start et padding-block dès aujourd'hui.

Le support pour les fonctionnalités plus récentes du Niveau 2 s'améliore rapidement mais n'est pas encore universel. Les valeurs logiques pour float, clear, et resize sont bien supportées. Les propriétés logiques de border-radius sont les plus récentes et pourraient encore être derrière des drapeaux de fonctionnalités ou dans des versions récentes de navigateurs. Comme toujours, vous devriez consulter des ressources comme MDN Web Docs ou CanIUse.com pour les données de compatibilité les plus à jour.

Stratégies d'Amélioration Progressive

Comme le CSS est conçu pour être résilient, nous pouvons facilement fournir des solutions de repli (fallbacks) pour les anciens navigateurs. La cascade garantira que si un navigateur ne comprend pas une propriété logique, il l'ignorera simplement et utilisera la propriété physique définie avant elle.

Voici comment vous pouvez écrire du CSS prêt pour les fallbacks :

.card {

  /* Solution de repli pour les anciens navigateurs */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Propriété logique moderne qui surchargera la solution de repli */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Cette approche assure une expérience de base solide pour tout le monde tout en fournissant la mise en page améliorée et adaptative pour les utilisateurs sur des navigateurs modernes. Pour les projets qui n'ont pas besoin de supporter plusieurs modes d'écriture, cela pourrait être excessif. Mais pour toute application mondiale, système de design ou thème, c'est une stratégie robuste et pérenne.

Le Futur est Logique : Au-delà du Niveau 2

La transition d'un état d'esprit physique à un état d'esprit logique est l'un des changements les plus importants du CSS moderne. Elle aligne notre langage de style avec la réalité d'un web diversifié et mondial. Elle nous éloigne des hacks fragiles et orientés écran pour nous rapprocher d'un design résilient et orienté contenu.

Reste-t-il des lacunes ? Quelques-unes. Des valeurs logiques pour des propriétés comme background-position ou les dégradés sont encore en discussion. Mais avec la sortie du Niveau 2, la grande majorité des tâches quotidiennes de mise en page et de stylisation peuvent maintenant être accomplies en utilisant une approche purement logique.

L'appel à l'action pour les développeurs est clair : commencez à utiliser les propriétés logiques par défaut. Faites de inline-size votre choix par défaut au lieu de width. Utilisez margin-inline au lieu de définir les marges gauche et droite séparément. Il ne s'agit pas seulement de supporter différentes langues ; il s'agit d'écrire un meilleur CSS, plus résilient. Un composant construit avec des propriétés logiques est intrinsèquement plus réutilisable et adaptable, qu'il soit utilisé dans une mise en page LTR, RTL ou verticale. C'est simplement une meilleure ingénierie.

Conclusion : Adoptez le Flux

Les Propriétés Logiques CSS Niveau 2 ne sont pas juste une collection de nouvelles fonctionnalités ; c'est l'aboutissement d'une vision. Elles fournissent les dernières pièces cruciales nécessaires pour construire des mises en page qui respectent le flux naturel de leur contenu, quel que soit ce flux. En adoptant des propriétés comme float: inline-start et border-start-start-radius, nous élevons notre métier du simple positionnement de boîtes sur un écran à la conception d'expériences web véritablement mondiales, inclusives et pérennes.

La prochaine fois que vous commencerez un nouveau projet ou construirez un nouveau composant, faites une pause avant de taper margin-left. Demandez-vous : « Est-ce que je veux dire la gauche, ou est-ce que je veux dire le début ? » En faisant ce petit changement mental, vous contribuerez à un web plus adaptable et accessible pour tous, partout.