Temps de lecture : 14 minutes environ.
Introduction
Bienvenue dans ce tutoriel CSS consacré aux propriétés logiques CSS. Ces propriétés permettent de gérer les écritures de droite à gauche, de gauche à droite, ainsi que les écritures de haut en bas. Elles sont particulièrement utiles pour les sites multilingues. Les propriétés logiques CSS sont un module qui permet de gérer les écritures qui vont de droite à gauche ou de gauche à droite, mais aussi les écritures de haut en bas avec un certain nombre de propriétés relatives aux dimensions, aux bordures, au remplissage, et ainsi de suite.
Prérequis
Avant de commencer, assurez-vous d'avoir une compréhension de base de HTML et CSS.
Structure HTML de Base
Commençons par créer une structure HTML de base. Nous allons créer deux divs avec des directions de texte différentes : une de gauche à droite (LTR) et une de droite à gauche (RTL).
<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div dir="ltr">
<p>Gauche à droite</p>
</div>
<div dir="rtl">
<p>Droite à gauche</p>
</div>
<section id="carre" dir="rtl">
<p>Contenu</p>
</section>
</body>
</html>CSS de Base
Ajoutons maintenant du CSS pour styliser nos divs et voir comment les propriétés logiques fonctionnent.
div {
background: yellow;
margin-left: 15px;
margin-inline-start: 50px;
border-right: 5px solid green;
border-inline-start: 5px solid red;
padding-inline-start: 50px;
text-align: end;
}
#carre {
width: 250px;
height: 250px;
background: red;
position: relative;
}
#carre p {
width: 100px;
height: 100px;
background: blue;
position: absolute;
inset-block-start: 50px;
inset-inline-start: 50px;
}Utilité et Bénéfices des Propriétés Logiques CSS
Les propriétés logiques CSS sont extrêmement utiles pour créer des sites web multilingues et accessibles. Voici quelques-uns des principaux bénéfices :
Accessibilité Améliorée : Les propriétés logiques permettent de créer des mises en page qui s'adaptent automatiquement à la direction du texte, ce qui améliore l'accessibilité pour les utilisateurs qui lisent dans des langues écrites de droite à gauche (comme l'arabe ou l'hébreu) ou de gauche à droite (comme le français ou l'anglais).
Maintenance Simplifiée : En utilisant des propriétés logiques, vous pouvez écrire du CSS qui fonctionne pour plusieurs directions de texte sans avoir à dupliquer le code. Cela simplifie la maintenance et réduit les risques d'erreurs.
Flexibilité : Les propriétés logiques offrent une grande flexibilité pour les développeurs, leur permettant de créer des designs qui s'adaptent facilement à différentes langues et directions de texte.
Compatibilité : Bien que certaines de ces propriétés soient encore expérimentales, elles sont largement supportées par les navigateurs modernes, ce qui en fait un choix viable pour les développeurs souhaitant créer des sites web modernes et accessibles.
Explications Techniques
margin-inline-start
La propriété margin-inline-start définit la marge au début de la ligne, en fonction de la direction du texte. Cela signifie que si la direction du texte est de gauche à droite (LTR), la marge sera appliquée à gauche. Si la direction du texte est de droite à gauche (RTL), la marge sera appliquée à droite.
div {
margin-inline-start: 50px;
}order-inline-start
La propriété border-inline-start définit la bordure au début de la ligne, en fonction de la direction du texte. De la même manière que margin-inline-start, cette propriété s'adapte automatiquement à la direction du texte.
div {
border-inline-start: 5px solid red;
}padding-inline-start
La propriété padding-inline-start définit le padding au début de la ligne, en fonction de la direction du texte. Cela permet d'ajouter de l'espace à l'intérieur de l'élément, en fonction de la direction du texte.
div {
padding-inline-start: 50px;
}text-align: end
La propriété text-align: end aligne le texte à la fin de la ligne, en fonction de la direction du texte. Cela signifie que le texte sera aligné à droite pour les langues LTR et à gauche pour les langues RTL.
div {
text-align: end;
}Positionnement avec Propriétés Logiques
Pour positionner des éléments en fonction de la direction du texte, nous pouvons utiliser les propriétés inset-block-start et inset-inline-start. Ces propriétés permettent de définir la position de l'élément par rapport à son conteneur, en fonction de la direction du texte.
#carre p {
inset-block-start: 50px; /* Positionnement vertical */
inset-inline-start: 50px; /* Positionnement horizontal */
}En suivant ce tutoriel, vous devriez maintenant avoir une bonne compréhension des propriétés logiques CSS et de leur utilité pour créer des sites web multilingues et accessibles. N'hésitez pas à expérimenter avec ces propriétés pour voir comment elles peuvent améliorer vos propres projets web.
Obtenir de l'aide
Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat.
Article publié le
Catégories : CSS HTML / CSS CSS avancé
Mots-clés : Tutoriel HTML et CSS responsive
Partager :
