Valeur calculée des propriétés logiques CSS : maîtriser le style orienté direction

Dans le paysage en constante évolution du développement web, assurer l’accessibilité et l’adaptabilité globales est primordial. Les propriétés logiques CSS offrent une solution puissante pour créer des mises en page qui répondent intelligemment aux différents modes d’écriture (horizontale, verticale) et directions de texte (gauche à droite, droite à gauche). Cet article explore le monde fascinant des propriétés logiques CSS, en se concentrant particulièrement sur la façon dont leurs valeurs calculées sont calculées, ce qui vous permet de créer des applications web véritablement orientées direction et internationalisées.

Comprendre les propriétés logiques CSS

Les propriétés CSS traditionnelles comme left, right, top et bottom sont intrinsèquement liées aux directions physiques de l’écran. Cela peut créer des défis lors de la conception pour des langues comme l’arabe ou l’hébreu, qui s’écrivent de droite à gauche (RTL). Les propriétés logiques CSS, en revanche, se rapportent au flux de contenu plutôt qu’aux positions fixes de l’écran. Elles abstraient les directions physiques, permettant à vos mises en page de s’adapter de manière transparente aux différents modes d’écriture et directions.

Au lieu de penser à left et right, vous pensez à inline-start et inline-end. Au lieu de top et bottom, vous pensez à block-start et block-end. Le navigateur gère le mappage de ces propriétés logiques à leurs propriétés physiques correspondantes en fonction de la direction et du writing-mode du document ou de l’élément.

Principaux avantages de l’utilisation des propriétés logiques :

• Internationalisation (I18N) : Adaptez facilement vos mises en page à différentes langues et directions d’écriture.
• Réactivité : Créez des mises en page flexibles qui s’adaptent à différentes tailles d’écran et appareils.
• Maintenabilité : Simplifiez votre code CSS en utilisant des propriétés abstraites qui gèrent automatiquement la directionnalité.
• Accessibilité : Améliorez l’accessibilité en vous assurant que vos mises en page sont lisibles et utilisables pour les utilisateurs ayant des préférences linguistiques différentes.

Les propriétés direction et writing-mode

Avant de plonger dans les valeurs calculées, passons brièvement en revue les propriétés de base qui régissent le comportement des propriétés logiques :

• direction : Spécifie la direction du texte, des colonnes de tableau et du dépassement horizontal. Les valeurs possibles sont ltr (gauche à droite) et rtl (droite à gauche). La valeur par défaut est ltr.
• writing-mode : Spécifie si les lignes de texte sont disposées horizontalement ou verticalement, et la direction dans laquelle les blocs progressent. Les valeurs courantes incluent :
• horizontal-tb (par défaut) : Flux de texte horizontal, progression de bloc de haut en bas.
• vertical-rl : Flux de texte vertical, progression de bloc de droite à gauche.
• vertical-lr : Flux de texte vertical, progression de bloc de gauche à droite.

Ces deux propriétés constituent le fondement des mises en page orientées direction. Le navigateur utilise leurs valeurs, ainsi que les propriétés logiques appliquées, pour déterminer les valeurs de propriété physique appropriées.

Valeurs calculées : le cœur du style orienté direction

La valeur calculée d’une propriété CSS est la valeur finale et résolue qui est utilisée par le navigateur pour afficher l’élément. Pour les propriétés logiques, la valeur calculée représente la valeur de propriété physique correspondante basée sur les propriétés direction et writing-mode.

Comprendre comment ces valeurs calculées sont déterminées est crucial pour déboguer et optimiser vos mises en page. Explorons cela avec des exemples.

Exemple 1 : margin-inline-start de base

Considérez le CSS suivant :

            .element {
  direction: ltr;
  margin-inline-start: 20px;
}

            

              
                Copy
              
            
          

Dans ce cas, étant donné que direction est ltr (de gauche à droite), la valeur calculée de margin-inline-start équivaudra à margin-left: 20px.

Maintenant, changeons le direction :

            .element {
  direction: rtl;
  margin-inline-start: 20px;
}

            

              
                Copy
              
            
          

Avec direction: rtl, la valeur calculée de margin-inline-start devient margin-right: 20px.

Cet exemple simple démontre la puissance des propriétés logiques. Il vous suffit de définir margin-inline-start une seule fois, et le navigateur l’adapte automatiquement du bon côté en fonction de la direction du texte.

Exemple 2 : padding-block-end avec le mode d’écriture vertical

Explorons un scénario plus complexe avec un mode d’écriture vertical :

            .element {
  writing-mode: vertical-rl;
  padding-block-end: 30px;
}

            

              
                Copy
              
            
          

Ici, writing-mode: vertical-rl indique un flux de texte vertical avec une progression de bloc de droite à gauche. Par conséquent, padding-block-end équivaut à padding-top: 30px.

Si nous changeons le mode d’écriture en vertical-lr :

            .element {
  writing-mode: vertical-lr;
  padding-block-end: 30px;
}

            

              
                Copy
              
            
          

Maintenant, padding-block-end devient padding-bottom: 30px.

Exemple 3 : Bordures et coins arrondis

Les propriétés logiques s’étendent au-delà des marges et du remplissage. Elles s’appliquent également aux bordures et aux coins arrondis. Considérez ces exemples :

            .element {
  direction: rtl;
  border-inline-start: 2px solid black;
  border-start-start-radius: 10px;
  border-end-start-radius: 10px;
}

            

              
                Copy
              
            
          

Dans ce contexte RTL :

• border-inline-start sera résolu en border-right.
• border-start-start-radius deviendra border-top-right-radius.
• border-end-start-radius deviendra border-bottom-right-radius.

Applications pratiques et exemples

Explorons quelques applications pratiques des propriétés logiques CSS dans des scénarios du monde réel :

1. Interface de chat

Dans une interface de chat, vous souhaitez que les messages de différents utilisateurs s’alignent sur les côtés opposés de l’écran, quelle que soit la langue de l’utilisateur.

            .message {
  margin-inline-start: auto; /* Align to the end by default */
}

.message.from-user {
  margin-inline-end: auto; /* Align to the start for the user's messages */
  margin-inline-start: 0;
}

            

              
                Copy
              
            
          

Avec ce CSS, les messages s’aligneront automatiquement à droite dans les langues LTR et à gauche dans les langues RTL. La classe .from-user peut être ajoutée dynamiquement aux messages envoyés par l’utilisateur actuel, garantissant un alignement correct quelle que soit la direction globale du document.

2. Navigation du site web

Considérez un site web avec un menu de navigation qui doit apparaître à gauche dans les langues LTR et à droite dans les langues RTL.

            .navigation {
  float: inline-start; /* Float to the start */
}

            

              
                Copy
              
            
          

En utilisant float: inline-start, le menu de navigation flottera automatiquement vers la gauche en LTR et vers la droite en RTL, simplifiant votre CSS et améliorant la maintenabilité.

3. Mises en page complexes avec writing-mode

Les propriétés logiques brillent lorsqu’on travaille avec des modes d’écriture verticaux. Imaginez concevoir une pièce calligraphique ou imiter des mises en page de texte traditionnelles d’Asie de l’Est.

            .vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  margin-block-start: 1em; /* Margin at the top in vertical mode */
  margin-block-end: 1em;   /* Margin at the bottom in vertical mode */
}

            

              
                Copy
              
            
          

Cela vous permet de créer des mises en page visuellement attrayantes et culturellement appropriées pour divers contenus.

Outils et techniques pour travailler avec les propriétés logiques

Voici quelques outils et techniques utiles pour utiliser efficacement les propriétés logiques CSS :

• Outils de développement du navigateur : Utilisez les outils de développement de votre navigateur pour inspecter les valeurs calculées des propriétés logiques et vérifier qu’elles se résolvent correctement en fonction de la direction et du writing-mode.
• Préprocesseurs CSS : Envisagez d’utiliser des préprocesseurs CSS comme Sass ou Less pour créer des mixins et des fonctions réutilisables qui simplifient la création de styles orientés direction.
• Plugins PostCSS : Explorez les plugins PostCSS comme postcss-logical, qui peuvent convertir automatiquement les propriétés physiques en propriétés logiques pendant le processus de construction.
• Tests : Testez minutieusement vos mises en page dans différentes langues et modes d’écriture pour vous assurer qu’elles s’affichent correctement dans tous les contextes. Envisagez d’utiliser des outils d’automatisation de navigateur pour automatiser ce processus de test.
• Systèmes de conception : Intégrez des propriétés logiques dans votre système de conception pour assurer la cohérence et la maintenabilité de vos projets.

Meilleures pratiques pour l’utilisation des propriétés logiques CSS

Pour maximiser les avantages des propriétés logiques CSS, suivez ces bonnes pratiques :

• Commencez par les propriétés logiques : Dans la mesure du possible, utilisez les propriétés logiques dès le début de votre projet pour éviter d’avoir à refactoriser votre CSS plus tard.
• Utilisez des noms de classe sémantiques : Utilisez des noms de classe descriptifs et sémantiques, plutôt que de vous appuyer sur des directions physiques. Par exemple, utilisez .navigation-menu au lieu de .left-navigation.
• Fournir des alternatives : Pour les anciens navigateurs qui ne prennent pas en charge les propriétés logiques, fournissez des styles de secours à l’aide de propriétés physiques traditionnelles. Cependant, concentrez-vous sur la prise en charge des navigateurs modernes et l’amélioration progressive.
• Tenez compte de l’accessibilité : Tenez toujours compte de l’accessibilité lors de la conception de vos mises en page. Assurez-vous que vos mises en page sont lisibles et utilisables pour les utilisateurs ayant des préférences linguistiques et des handicaps différents.
• Documentez votre code : Documentez clairement votre code CSS, en expliquant le but de chaque propriété logique et comment elle est utilisée.

L’avenir des propriétés logiques CSS

Les propriétés logiques CSS sont une fonctionnalité relativement nouvelle, et leur adoption est encore en croissance. Au fur et à mesure que la prise en charge des navigateurs s’améliorera et que davantage de développeurs les adopteront, nous pouvons nous attendre à voir des utilisations encore plus innovantes de ces puissantes propriétés.

Le groupe de travail CSS continue de faire évoluer la spécification CSS, et nous pourrions voir de nouvelles propriétés et fonctionnalités logiques ajoutées à l’avenir. Se tenir au courant des derniers développements en CSS est crucial pour la création d’applications web modernes, accessibles et internationalisées.

Conclusion

Les propriétés logiques CSS changent la donne pour la création d’applications web orientées direction et internationalisées. En comprenant comment leurs valeurs calculées sont déterminées, vous pouvez créer des mises en page qui s’adaptent de manière transparente à différentes langues, modes d’écriture et appareils. Adoptez les propriétés logiques dans vos projets pour créer un web plus inclusif et accessible pour les utilisateurs du monde entier.

En maîtrisant les concepts et les techniques présentés dans cet article, vous serez bien équipé pour tirer parti de la puissance des propriétés logiques CSS et créer des expériences web véritablement mondiales.

Ressources supplémentaires

• MDN Web Docs : Propriétés et valeurs logiques CSS
• Propriétés et valeurs logiques CSS Niveau 1
• Puis-je utiliser... Propriétés logiques CSS