Votre CSS est-il logique ?

Jetez un œil à cet extrait de code CSS. Qu'est-ce qui ne va pas ?

p {
    border-top: 2px solid red;
    margin-left: 2rem;
    width: 80ch;
}

En fonction de l'audience de votre site Web, il y a soit zéro, soit trois erreurs. Avant d'expliquer quelles erreurs, définissons le contexte.

Une question de point de vue

Lorsque vous montez sur un bateau, vous n'entendrez pas de termes comme « gauche » ou « droite ». En effet, les côtés gauche/droit d'un bateau dépendent du point de vue de l'observateur. Ils utilisent plutôt « bâbord » et « tribord », des termes sans ambiguïté qui font toujours référence aux mêmes côtés du bateau, quelle que soit votre position ou celle de l'orateur :

Image créée par Pearson Scott Foresman et publiée dans le domaine public. Source

Le même principe s'applique aux termes anatomiques de localisation, qui permettent aux médecins et vétérinaires de décrire sans ambiguïté la localisation des parties du corps, quelle que soit la position relative du patient ou du médecin.

Internationalisation CSS

Si vos applications Web sont utilisées à l'échelle mondiale, vous devez les concevoir pour s'adapter aux différents besoins linguistiques. Par exemple, des langues comme l'anglais et l'espagnol s'écrivent de gauche à droite (LTR) ; L'arabe et l'hébreu s'écrivent de droite à gauche (RTL) ; Le mongol et le japonais traditionnel s'écrivent de haut en bas.

Donc, lorsque vous utilisez une déclaration CSS comme celle-ci :

p {
    margin-left: 2rem;
}

Voulez-vous dire que (1) vous souhaitez ajouter de l'espace à la gauche physique du paragraphe, ou (2) vous souhaitez ajouter de l'espace avant le début du contenu ? Pour une interface utilisateur entièrement internationalisée, la bonne réponse est toujours (2).

La solution logique

Vous pouvez créer des feuilles de style distinctes pour les langages LTR et RTL et les charger de manière conditionnelle. Il existe même des outils comme le plugin webpack-rtl qui peuvent générer automatiquement une feuille de style RTL basée sur la feuille de style LTR originale.

Cependant, la meilleure solution serait d'appliquer les styles CSS de manière conditionnelle comme ceci :

p {
    if writing is left-to-right:
        margin-left: 2rem;
    elseif writing is right-to-left:
        margin-right: 2rem;
    elseif writing is top-to-bottom:
        margin-top: 2rem;
    endif
}

Vous pouvez faire cela en CSS mais avec une syntaxe beaucoup plus simple :

p {
    margin-inline-start: 2rem;
}

Cette propriété margin-inline-start est une propriété CSS logique qui s'ajuste dynamiquement en fonction du sens d'écriture de l'utilisateur. Les propriétés logiques fonctionnent de la même manière que l'analogie bâbord/tribord ; ils décrivent la mise en page d'une manière sans ambiguïté dans différents systèmes d'écriture.

Les propriétés logiques définissent les directions de mise en page en utilisant ces deux termes :

• inline : parallèle au flux de texte dans une ligne.
• bloc : perpendiculaire au flux du texte dans une ligne.

Cette illustration montre les positions logiques par rapport aux emplacements physiques pour tous les modes d'écriture supportés par CSS :

En utilisant des propriétés logiques, l'exemple initial présenté au début de cet article peut être réécrit comme ceci :

p {
    border-top: 2px solid red;
    margin-left: 2rem;
    width: 80ch;
}

Mettre à jour une feuille de style CSS existante pour utiliser des propriétés logiques peut sembler intimidant au début. Cependant, la plupart du travail consiste simplement à remplacer left par inline-start, right par inline-end, top par block-start et bottom par block-end. Certaines propriétés nécessitent un changement de nom différent ; par exemple, le rayon de bordure en bas à gauche devient le rayon de début de bordure, la hauteur devient la taille du bloc, etc.

L'effort en vaut la peine, car il s'agit d'une solution évolutive qui garantit que votre site Web est accessible à tous. Par exemple, le projet EasyAdmin, dans lequel je participe, a déjà mis à jour ses feuilles de style pour utiliser des propriétés logiques.

Référence des propriétés logiques

Voici un tableau de référence de toutes les propriétés logiques pour vous aider à mettre à jour vos propres projets :

Physical Property	Logical Property
border-bottom	border-block-end
border-bottom-color	border-block-end-color
border-bottom-left-radius	border-end-start-radius
border-bottom-right-radius	border-end-end-radius
border-bottom-style	border-block-end-style
border-bottom-width	border-block-end-width
border-left	border-inline-start
border-left-color	border-inline-start-color
border-left-style	border-inline-start-style
border-left-width	border-inline-start-width
border-right	border-inline-end
border-right-color	border-inline-end-color
border-right-style	border-inline-end-style
border-right-width	border-inline-end-width
border-top	border-block-start
border-top-color	border-block-start-color
border-top-left-radius	border-start-start-radius
border-top-right-radius	border-start-end-radius
border-top-style	border-block-start-style
border-top-width	border-block-start-width
bottom	inset-block-end
container-intrinsic-height	contain-intrinsic-block-size
container-intrinsic-width	contain-intrinsic-inline-size
height	block-size
left	inset-inline-start
margin-bottom	margin-block-end
margin-left	margin-inline-start
margin-right	margin-inline-end
margin-top	margin-block-start
max-height	max-block-size
max-width	max-inline-size
min-height	min-block-size
min-width	min-inline-size
overscroll-behavior-x	overscroll-behavior-inline
overscroll-behavior-y	overscroll-behavior-block
overflow-x	overflow-inline
overflow-y	overflow-block
padding-bottom	padding-block-end
padding-left	padding-inline-start
padding-right	padding-inline-end
padding-top	padding-block-start
right	inset-inline-end
top	inset-block-start
width	inline-size

Apprendre encore plus

• MDN : propriétés et valeurs logiques CSS

---

✨ Si vous avez apprécié cet article ou mes autres articles et souhaitez soutenir mon travail, pensez à me parrainer sur GitHub ?

---

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!