Propriétés logiques CSS : créer des sites web pour un public mondial

Dans le monde interconnecté d'aujourd'hui, les sites web doivent s'adresser à un public mondial. Cela signifie prendre en charge différentes langues, modes d'écriture et conventions culturelles. Les propriétés CSS traditionnelles, basées sur des dimensions physiques (haut, droite, bas, gauche), peuvent devenir problématiques lorsqu'il s'agit de mises en page qui s'écoulent dans différentes directions. Les propriétés logiques CSS offrent une solution en définissant la mise en page en fonction du flux du contenu plutôt que de l'orientation physique de l'écran. Cet article approfondira la puissance des propriétés logiques CSS et comment elles peuvent vous aider à créer des sites web véritablement internationaux.

Comprendre la nécessité des propriétés logiques

Traditionnellement, les propriétés CSS comme margin-left et padding-right supposent un mode d'écriture de gauche à droite (LTR). Cependant, de nombreuses langues, telles que l'arabe et l'hébreu, utilisent un mode d'écriture de droite à gauche (RTL). Lorsque vous utilisez le CSS traditionnel sur un site web RTL, vous devez souvent inverser les valeurs de ces propriétés, ce qui conduit à des feuilles de style complexes et sujettes aux erreurs. De plus, certaines langues d'Asie de l'Est peuvent être écrites verticalement, ce qui introduit une autre couche de complexité. Les propriétés logiques résolvent ces problèmes en fournissant un moyen de définir les styles en fonction du flux du contenu, plutôt que de sa position physique sur l'écran. Cela garantit que vos mises en page s'adaptent automatiquement aux différents modes d'écriture et directions.

Le problème avec les propriétés physiques

Considérez un simple menu de navigation avec des éléments séparés par une marge. En utilisant les propriétés physiques, vous pourriez écrire :

            .nav-item {
 margin-right: 10px;
}

            

              
                Copy
              
            
          

Cela fonctionne parfaitement pour les langues LTR. Cependant, lorsque le site web est rendu dans une langue RTL, la marge apparaît du mauvais côté des éléments de navigation. Pour corriger cela, vous devrez ajouter une autre règle CSS spécifiquement pour les mises en page RTL :

            [dir="rtl"] .nav-item {
 margin-right: 0;
 margin-left: 10px;
}

            

              
                Copy
              
            
          

Cette approche est lourde et rend votre CSS plus difficile à maintenir. Les propriétés logiques offrent une solution beaucoup plus propre et plus facile à maintenir.

Présentation des propriétés logiques CSS

Les propriétés logiques CSS remplacent les propriétés physiques (haut, droite, bas, gauche) par des équivalents logiques relatifs au mode d'écriture et à la directionnalité du contenu. Voici quelques propriétés logiques clés et leurs propriétés physiques correspondantes :

• margin-inline-start : Équivalent à margin-left en LTR et margin-right en RTL.
• margin-inline-end : Équivalent à margin-right en LTR et margin-left en RTL.
• padding-inline-start : Équivalent à padding-left en LTR et padding-right en RTL.
• padding-inline-end : Équivalent à padding-right en LTR et padding-left en RTL.
• border-inline-start : Équivalent à border-left en LTR et border-right en RTL.
• border-inline-end : Équivalent à border-right en LTR et border-left en RTL.
• inset-inline-start : Équivalent à left en LTR et right en RTL.
• inset-inline-end : Équivalent à right en LTR et left en RTL.
• margin-block-start : Équivalent à margin-top en LTR et RTL.
• margin-block-end : Équivalent à margin-bottom en LTR et RTL.
• padding-block-start : Équivalent à padding-top en LTR et RTL.
• padding-block-end : Équivalent à padding-bottom en LTR et RTL.
• border-block-start : Équivalent à border-top en LTR et RTL.
• border-block-end : Équivalent à border-bottom en LTR et RTL.
• inset-block-start : Équivalent à top en LTR et RTL.
• inset-block-end : Équivalent à bottom en LTR et RTL.
• inline-size : Représente la dimension horizontale. Équivalent à width pour les modes d'écriture horizontaux.
• block-size : Représente la dimension verticale. Équivalent à height pour les modes d'écriture horizontaux.

Les termes "inline" et "block" se réfèrent à la direction du flux du texte. La direction inline est la direction dans laquelle le texte s'écoule dans une ligne (par exemple, de gauche à droite ou de droite à gauche). La direction block est la direction dans laquelle les blocs de texte sont empilés (par exemple, de haut en bas). L'utilisation de ces propriétés logiques vous permet de définir des styles indépendants du mode d'écriture et de la direction.

Exemples pratiques d'utilisation des propriétés logiques

Exemple 1 : Menu de navigation

Reprenons l'exemple du menu de navigation. Au lieu d'utiliser margin-right, nous pouvons utiliser margin-inline-end :

            .nav-item {
 margin-inline-end: 10px;
}

            

              
                Copy
              
            
          

Maintenant, que le site web soit en LTR ou en RTL, la marge apparaîtra toujours du bon côté des éléments de navigation. Pas besoin de règles CSS spécifiques au RTL !

Exemple 2 : Mise en page de cartes

Considérez une mise en page de cartes avec une image d'un côté et du texte de l'autre. Nous pouvons utiliser des propriétés logiques pour positionner correctement l'image, quelle que soit le mode d'écriture :

            .card {
 display: flex;
}

.card-image {
 flex: 0 0 150px;
}

.card-content {
 padding-inline-start: 20px; /* Ajuster l'espacement entre l'image et le texte */
}

            

              
                Copy
              
            
          

Dans cet exemple, padding-inline-start ajoutera un espacement à gauche du contenu en LTR et à droite en RTL, garantissant que le texte est toujours visuellement séparé de l'image.

Exemple 3 : Étiquettes de formulaire

Lors de la conception de formulaires, les étiquettes sont généralement placées à gauche des champs de saisie dans les mises en page LTR. Dans les mises en page RTL, les étiquettes doivent être à droite. Les propriétés logiques facilitent cela :

            label {
 display: inline-block;
 text-align: end;
 width: 100px;
 margin-inline-end: 10px; /* Espace entre l'étiquette et l'entrée */
}

            

              
                Copy
              
            
          

La propriété text-align: end aligne le texte à droite en LTR et à gauche en RTL. La propriété margin-inline-end ajoute un espacement entre l'étiquette et le champ de saisie du bon côté.

Utilisation des propriétés logiques avec les modes d'écriture

Les modes d'écriture CSS contrôlent la direction dans laquelle le texte s'écoule, à la fois horizontalement et verticalement. Les propriétés logiques sont particulièrement utiles lorsque l'on travaille avec différents modes d'écriture, tels que le texte vertical. La propriété writing-mode peut prendre des valeurs telles que horizontal-tb (par défaut, horizontal de haut en bas), vertical-rl (vertical de droite à gauche) et vertical-lr (vertical de gauche à droite).

Lorsque vous utilisez des modes d'écriture verticaux, la signification des propriétés logiques change. Par exemple, margin-inline-start et margin-inline-end se réfèrent désormais respectivement aux marges supérieure et inférieure.

Exemple : Navigation verticale

Créons un menu de navigation vertical :

            .vertical-nav {
 writing-mode: vertical-rl; /* or vertical-lr */
}

.vertical-nav-item {
 margin-block-end: 10px; /* Espace entre les éléments */
}

            

              
                Copy
              
            
          

Dans cet exemple, margin-block-end ajoute de l'espace entre les éléments de navigation dans la direction verticale.

Directionnalité : LTR et RTL

La propriété direction spécifie la direction du flux du texte dans un élément. Elle peut avoir deux valeurs : ltr (de gauche à droite) et rtl (de droite à gauche). Cette propriété est souvent utilisée en conjonction avec l'attribut lang sur la balise <html> ou sur des éléments spécifiques pour indiquer la langue et la directionnalité du contenu.

            <html lang="ar" dir="rtl">
 <body>
 <!-- Contenu en arabe ici -->
 </body>
</html>

            

              
                Copy
              
            
          

Lorsque l'attribut dir est défini sur rtl, le navigateur inverse automatiquement la direction du contenu inline et applique les styles appropriés en fonction des propriétés logiques.

Avantages de l'utilisation des propriétés logiques

• Internationalisation (i18n) et localisation (l10n) améliorées : Les propriétés logiques facilitent la création de sites web qui s'adaptent à différentes langues, modes d'écriture et conventions culturelles.
• Complexité CSS réduite : En éliminant le besoin de règles CSS distinctes spécifiques au RTL, les propriétés logiques simplifient vos feuilles de style et les rendent plus faciles à maintenir.
• Lisibilité du code améliorée : Les noms de propriétés logiques sont plus descriptifs et plus faciles à comprendre que les noms de propriétés physiques, ce qui conduit à un code plus lisible.
• Meilleures performances : La complexité CSS réduite peut conduire à une amélioration des performances du site web, car le navigateur a moins de CSS à analyser et à appliquer.
• Pérennité : Au fur et à mesure que les normes web évoluent, les propriétés logiques sont susceptibles de devenir encore plus importantes pour la création de sites web flexibles et adaptables.

Compatibilité des navigateurs

La plupart des navigateurs modernes prennent bien en charge les propriétés logiques CSS, notamment Chrome, Firefox, Safari et Edge. Cependant, les anciens navigateurs peuvent ne pas les prendre entièrement en charge. Il est toujours bon de vérifier les tableaux de compatibilité des navigateurs (par exemple, sur caniuse.com) avant d'utiliser largement les propriétés logiques. Vous pouvez également utiliser des outils comme Autoprefixer pour générer automatiquement des propriétés de repli pour les anciens navigateurs.

Meilleures pratiques pour l'utilisation des propriétés logiques

• Commencez par les propriétés logiques : Dans la mesure du possible, utilisez les propriétés logiques au lieu des propriétés physiques lors de la définition des styles de mise en page.
• Utilisez l'attribut dir : Utilisez l'attribut dir sur la balise <html> ou sur des éléments spécifiques pour indiquer la directionnalité du contenu.
• Testez minutieusement : Testez votre site web dans différentes langues et modes d'écriture pour vous assurer que la mise en page s'adapte correctement. Utilisez les outils de développement du navigateur pour inspecter les styles appliqués et identifier les problèmes.
• Envisagez les replis : Pour les anciens navigateurs qui ne prennent pas en charge les propriétés logiques, envisagez d'utiliser des propriétés de repli ou des outils comme Autoprefixer.
• Maintenez la cohérence : Utilisez les propriétés logiques de manière cohérente dans votre feuille de style pour éviter toute confusion et maintenir une conception cohérente.
• Apprenez la terminologie : Familiarisez-vous avec les termes "inline" et "block" et leur relation avec les modes d'écriture et la directionnalité.
• Utilisez les variables CSS : Vous pouvez utiliser des variables CSS pour définir des valeurs pour les propriétés logiques et les réutiliser dans votre feuille de style. Cela permet de maintenir la cohérence et de faciliter la mise à jour des styles. Par exemple :

            :root {
 --spacing-inline: 10px;
}

.element {
 margin-inline-start: var(--spacing-inline);
 padding-inline-end: var(--spacing-inline);
}

            

              
                Copy
              
            
          

Techniques avancées

Utilisation de calc() avec les propriétés logiques

Vous pouvez utiliser la fonction calc() avec les propriétés logiques pour effectuer des calculs basés sur la taille du contenu ou d'autres éléments. Par exemple :

            .container {
 width: 100%;
}

.element {
 margin-inline-start: calc(50% - 100px); /* Centrer l'élément */
}

            

              
                Copy
              
            
          

Combinaison des propriétés logiques avec Flexbox et Grid

Les propriétés logiques fonctionnent de manière transparente avec les mises en page CSS Flexbox et Grid. Vous pouvez les utiliser pour contrôler l'alignement et la distribution des éléments dans un conteneur flex ou grid. Par exemple :

            .flex-container {
 display: flex;
 justify-content: space-between;
 padding-inline-start: 20px;
 padding-inline-end: 20px;
}

            

              
                Copy
              
            
          

Utilisation des propriétés logiques avec JavaScript

Vous pouvez utiliser JavaScript pour détecter la directionnalité du contenu et appliquer les styles appropriés en fonction des propriétés logiques. Par exemple :

            const isRtl = document.documentElement.getAttribute('dir') === 'rtl';

if (isRtl) {
 // Appliquer les styles spécifiques à RTL
 document.body.classList.add('rtl');
}

            

              
                Copy
              
            
          

Ensuite, dans votre CSS :

            .element {
 margin-inline-start: 10px; /* Style LTR par défaut */
}

.rtl .element {
 margin-inline-start: 0; /* Remplacer pour RTL */
 margin-inline-end: 10px;
}

            

              
                Copy
              
            
          

Bien que cette approche soit possible, il est généralement préférable de s'appuyer sur les propriétés logiques CSS et l'attribut dir chaque fois que possible, car cela maintient votre code plus propre et plus facile à maintenir.

Considérations d'accessibilité

L'utilisation des propriétés logiques peut également améliorer l'accessibilité de votre site web. En vous assurant que votre mise en page s'adapte correctement aux différents modes d'écriture, vous pouvez faciliter la navigation et la compréhension de votre contenu pour les utilisateurs handicapés. Par exemple, les utilisateurs qui utilisent des lecteurs d'écran peuvent s'appuyer sur l'ordre de lecture correct des éléments, qui peut être affecté par le sens de l'écriture. L'utilisation de propriétés logiques permet de garantir que l'ordre de lecture est cohérent, quelle que soit la langue.

Conclusion

Les propriétés logiques CSS sont un outil puissant pour créer des sites web qui s'adressent à un public mondial. En utilisant les propriétés logiques au lieu des propriétés physiques, vous pouvez créer des mises en page qui s'adaptent automatiquement à différentes langues, modes d'écriture et conventions culturelles. Cela conduit à une internationalisation améliorée, une complexité CSS réduite et une lisibilité du code améliorée. Adoptez les propriétés logiques CSS et créez des expériences web véritablement globales et accessibles pour tous.

Pour aller plus loin

• MDN Web Docs : Propriétés logiques CSS
• Propriétés et valeurs logiques CSS Niveau 1
• Can I Use : Propriétés logiques CSS