Border-radius logique en CSS : S'adapter aux modes d'écriture pour un design global

Dans le paysage en constante évolution de la conception web, il est crucial de créer des mises en page qui s'adaptent de manière fluide aux différentes langues, cultures et modes d'écriture. Les propriétés CSS traditionnelles reposent souvent sur des dimensions physiques (haut, droite, bas, gauche), ce qui peut devenir problématique avec les langues qui se lisent de droite à gauche (RTL) ou de haut en bas.

Les propriétés et valeurs logiques CSS offrent une solution en introduisant des concepts basés sur le flux et la direction plutôt que sur des bords physiques. Parmi ces outils puissants, la famille border-radius gagne en flexibilité grâce à ses équivalents logiques. Cet article explore le monde des propriétés de border-radius logique en CSS, expliquant leur fonctionnalité et démontrant leur valeur dans la construction d'expériences web véritablement mondiales.

Comprendre le besoin de propriétés logiques

Historiquement, les propriétés CSS ont été liées à des dimensions physiques. Par exemple, margin-left ajoute toujours de l'espace sur le côté gauche d'un élément. Cela fonctionne bien pour les langues de gauche à droite (LTR) comme le français, mais devient moins intuitif dans les langues RTL comme l'arabe ou l'hébreu, où le côté "gauche" est en réalité le côté visuel droit.

Imaginez un site web avec une barre latérale positionnée à gauche dans les langues LTR. L'utilisation de margin-left et float: left fonctionne parfaitement. Cependant, lorsque le site est traduit en arabe, la barre latérale devrait idéalement apparaître à droite. Passer manuellement de margin-left à margin-right et de float: left à float: right ajoute de la complexité et une surcharge de maintenance.

Les propriétés logiques résolvent ce problème en utilisant des concepts comme 'début' (start) et 'fin' (end) qui s'adaptent automatiquement en fonction du mode d'écriture. Cela simplifie radicalement la création de mises en page qui fonctionnent correctement dans différentes langues et systèmes d'écriture.

Présentation des propriétés de border-radius logique en CSS

La propriété traditionnelle border-radius vous permet d'arrondir les coins d'un élément. Cependant, elle repose sur des directions physiques comme border-top-left-radius, border-top-right-radius, border-bottom-right-radius, et border-bottom-left-radius. La spécification des propriétés et valeurs logiques CSS introduit de nouvelles propriétés, sensibles au mode d'écriture, qui offrent une plus grande flexibilité et adaptabilité :

• border-start-start-radius : Spécifie le rayon de la bordure pour le coin début-début d'un élément.
• border-start-end-radius : Spécifie le rayon de la bordure pour le coin début-fin d'un élément.
• border-end-start-radius : Spécifie le rayon de la bordure pour le coin fin-début d'un élément.
• border-end-end-radius : Spécifie le rayon de la bordure pour le coin fin-fin d'un élément.

Ici, 'start' (début) et 'end' (fin) sont relatifs au mode d'écriture et à la directionnalité du contenu. Dans une langue LTR, 'start' correspond à la gauche et 'end' à la droite. Dans une langue RTL, 'start' correspond à la droite et 'end' à la gauche. De même, pour les modes d'écriture verticaux, 'start' correspond au haut et 'end' au bas.

Exemples pratiques et cas d'utilisation

Explorons quelques exemples pratiques pour illustrer comment ces propriétés de border-radius logique peuvent être utilisées pour créer des designs responsives et conscients du mode d'écriture.

Exemple 1 : Des boutons arrondis qui s'adaptent au mode d'écriture

Considérons un bouton aux coins arrondis. Nous voulons que l'arrondi apparaisse sur les bords de début et de fin, quel que soit le mode d'écriture.

HTML :

<button class="button">Cliquez-moi</button>

CSS :

.button {
  border-start-start-radius: 10px;
  border-start-end-radius: 10px;
  border-end-start-radius: 10px;
  border-end-end-radius: 10px;
  /* Ou, en utilisant la notation abrégée : */
  border-radius: 10px;
}

[dir="rtl"] .button {
 /* Aucun changement nécessaire ! Le navigateur gère l'adaptation du mode d'écriture */
}

Dans cet exemple, que la page soit en LTR ou RTL, les coins supérieur-gauche et supérieur-droit (en LTR) ou supérieur-droit et supérieur-gauche (en RTL) seront arrondis. Il n'est pas nécessaire d'écrire des règles CSS distinctes pour les différents modes d'écriture. Le navigateur applique intelligemment les styles en fonction de l'attribut dir.

Exemple 2 : Bulles de discussion avec placement dynamique de la queue

Les bulles de discussion sont un élément d'interface utilisateur courant. Typiquement, la queue de la bulle pointe vers l'expéditeur. En utilisant les propriétés logiques, nous pouvons facilement adapter l'apparence de la bulle selon que le message provient de l'utilisateur ou d'un autre contact, et aussi tenir compte du mode d'écriture.

HTML :

<div class="chat-bubble user">Bonjour !</div>
<div class="chat-bubble other">Salut !</div>

CSS :

.chat-bubble {
  background-color: #eee;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 10px;
}

.chat-bubble.user {
  border-start-start-radius: 0; /* Supprime le rayon sur le coin supérieur-gauche (LTR) ou supérieur-droit (RTL) */
}

.chat-bubble.other {
  border-start-end-radius: 0; /* Supprime le rayon sur le coin supérieur-droit (LTR) ou supérieur-gauche (RTL) */
}

/* Pour les langues RTL, le navigateur inverse automatiquement le début/fin */
/* Aucun CSS supplémentaire n'est requis */

Dans ce scénario, la classe .user supprime le rayon de la bordure sur le coin 'start-start', créant ainsi la queue. Pour les langues LTR, c'est le coin supérieur gauche. Pour les langues RTL, le navigateur interprète automatiquement 'start-start' comme le coin supérieur droit, garantissant que la queue est toujours positionnée correctement sans nécessiter de styles spécifiques pour le RTL.

Exemple 3 : Cartes avec mise en évidence d'un coin

Disons que nous voulons mettre en évidence un coin spécifique d'une carte pour indiquer un élément en vedette. L'utilisation des propriétés logiques rend cela incroyablement flexible.

HTML :

<div class="card featured">
  <h2>Titre du produit</h2>
  <p>Description du produit.</p>
</div>

CSS :

.card {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
}

.card.featured {
  border-end-end-radius: 0; /* Supprime le rayon sur le coin inférieur-droit (LTR) ou inférieur-gauche (RTL) */
  border-top: 3px solid red;
  border-start-start-radius:0; /*Supprime le rayon en haut à gauche*/
}

La classe .featured supprime le rayon du coin 'end-end', qui sera le coin inférieur-droit en LTR et le coin inférieur-gauche en RTL. Cet effet sera automatiquement inversé pour les langues RTL par le navigateur.

Avantages de l'utilisation des propriétés de border-radius logique

• Internationalisation simplifiée : Écrivez moins de CSS et évitez la complexité de gérer des feuilles de style distinctes pour différents modes d'écriture.
• Meilleure réactivité : Créez des mises en page qui s'adaptent plus fluidement aux différentes tailles d'écran et orientations.
• Maintenabilité accrue : Les propriétés logiques produisent un code plus propre, plus concis, plus facile à comprendre et à maintenir.
• Accessibilité améliorée : En gérant correctement la mise en page et la directionnalité, vous créez une expérience plus inclusive pour les utilisateurs de toutes les langues et cultures.
• Pérennité : Alors que le CSS continue d'évoluer, l'adoption des propriétés logiques garantit que votre code reste pertinent et adaptable.

Support des navigateurs et Polyfills

La plupart des navigateurs modernes offrent un excellent support pour les propriétés et valeurs logiques CSS, y compris les propriétés de border-radius logique. Cependant, pour les navigateurs plus anciens qui ne disposent pas de support natif, vous pouvez utiliser des polyfills pour assurer la compatibilité. Autoprefixer peut souvent gérer les transformations nécessaires pour garantir que votre code fonctionne sur un plus large éventail de navigateurs.

C'est toujours une bonne pratique de vérifier le support actuel des navigateurs sur des ressources comme Can I use avant d'implémenter ces propriétés dans un environnement de production.

Bonnes pratiques et considérations

• Utilisez les propriétés logiques de manière cohérente : Une fois que vous commencez à utiliser des propriétés logiques, essayez de les appliquer dans tout votre projet pour plus de cohérence. Le mélange de propriétés logiques et physiques peut entraîner de la confusion et des résultats inattendus.
• Testez de manière approfondie : Testez votre site web dans différents modes d'écriture (LTR, RTL et potentiellement vertical) pour vous assurer que la mise en page s'adapte correctement.
• Considérez l'attribut `direction` : L'attribut direction (dir="ltr" ou dir="rtl") est essentiel pour indiquer le mode d'écriture de votre contenu. Assurez-vous qu'il est correctement défini sur l'élément <html> ou sur des sections spécifiques de votre page.
• Utilisez avec d'autres propriétés logiques : Combinez les propriétés de border-radius logique avec d'autres propriétés logiques comme margin-inline-start, padding-block-end et inset-inline-start pour des mises en page véritablement conscientes du mode d'écriture.
• Test d'accessibilité : Assurez-vous que vos mises en page sont accessibles en utilisant des lecteurs d'écran et d'autres technologies d'assistance. Une directionnalité correcte est essentielle pour les utilisateurs qui dépendent de ces outils.

Techniques avancées et notation abrégée

Tout comme avec la propriété standard border-radius, vous pouvez utiliser une notation abrégée pour définir plusieurs rayons de bordure logiques à la fois :

border-radius: border-start-start-radius border-start-end-radius border-end-end-radius border-end-start-radius;

Vous pouvez également utiliser une, deux, trois ou quatre valeurs, tout comme vous le feriez avec la propriété standard border-radius. L'interprétation de ces valeurs suit les mêmes règles :

• Une valeur : Les quatre coins ont le même rayon.
• Deux valeurs : La première valeur s'applique aux coins début-début et fin-fin, et la deuxième valeur s'applique aux coins début-fin et fin-début.
• Trois valeurs : La première valeur s'applique au coin début-début, la deuxième valeur s'applique aux coins début-fin et fin-début, et la troisième valeur s'applique au coin fin-fin.
• Quatre valeurs : Chaque valeur s'applique à un coin spécifique dans l'ordre : début-début, début-fin, fin-fin, fin-début.

Par exemple :

border-radius: 10px; /* Tous les coins ont un rayon de 10px */
border-radius: 10px 20px; /* début-début et fin-fin : 10px, début-fin et fin-début : 20px */
border-radius: 10px 20px 30px; /* début-début : 10px, début-fin et fin-début : 20px, fin-fin : 30px */
border-radius: 10px 20px 30px 40px; /* début-début : 10px, début-fin : 20px, fin-fin : 30px, fin-début : 40px */

Conclusion : Adoptez les propriétés logiques pour un web mondial

Les propriétés et valeurs logiques CSS, y compris les propriétés de border-radius logique, sont des outils essentiels pour créer des expériences web véritablement mondiales et accessibles. En comprenant et en utilisant ces propriétés, vous pouvez simplifier considérablement le processus d'adaptation de vos designs à différentes langues, cultures et modes d'écriture.

Alors que le web devient de plus en plus mondial, il est crucial d'adopter des bonnes pratiques qui garantissent l'inclusivité et l'accessibilité pour tous les utilisateurs. Adoptez les propriétés logiques, testez de manière approfondie et créez des sites web qui fonctionnent de manière transparente dans différentes langues et systèmes d'écriture.

En abandonnant les dimensions physiques pour adopter des concepts logiques, vous créerez des sites web plus maintenables, responsives et conviviaux, qui s'adressent à un public mondial diversifié.

Ressources supplémentaires

• MDN Web Docs : Propriétés et valeurs logiques CSS
• W3C CSS Logical Properties and Values Level 1
• Can I use (pour vérifier le support des navigateurs)