Dans cet article, nous plongerons dans les propriétés logiques CSS. Nous examinerons ce qu'ils sont, comment ils fonctionnent et ce pour quoi ils sont utiles. Nous fournirons également une feuille de triche pratique afin que vous puissiez facilement comparer les propriétés logiques CSS avec leurs équivalents physiques.
Même si vous choisissez de ne pas utiliser vous-même des propriétés logiques, c'est une bonne idée de se familiariser avec eux, car ils commencent à apparaître dans le code de plus en plus de sites Web et de démos en ligne.
Par exemple, vous pourriez rencontrer ceci:
<span>p {
</span> <span>margin-block-start: 1em;
</span><span>}
</span>à moins que vous ne connaissiez les propriétés logiques CSS, cela ne signifiera probablement pas grand-chose pour vous. Si vous lisez la suite, vous serez bientôt une propriété logique ninja!
Téléchargez nos propriétés logiques pratiques Feuille de triche PDF.
Les propriétés logiques offrent une nouvelle façon de déclarer des propriétés telles que la largeur et la hauteur, le rembourrage, la marge, la bordure, le rayon de bordure, la position, le flotteur, l'alignement du texte et le débordement. Traditionnellement, ces propriétés ont été déclarées en relation avec les dimensions physiques d'un écran d'ordinateur - gauche, droite, haut et en bas. Les propriétés logiques sont plutôt basées sur la direction du texte .
Certaines langues se déroulent de gauche à droite, comme l'anglais. D'autres courent de droite à gauche, comme l'arabe. D'autres courent parfois de haut en bas, comme le japonais. De nombreux sites Web ont plusieurs versions dans différentes langues, telles que le site d'actualités de la BBC en anglais, arabe et chinois, ou du site d'Al Jazeera en anglais, arabe et chinois.
Avoir des styles liés à la direction du texte offre un certain nombre d'avantages, car ils peuvent s'adapter aux modifications de la direction du texte et ainsi s'appliquer dans toutes les versions d'un site.
Pour mieux saisir le but des propriétés logiques, nous devons vraiment comprendre quelques choses sur la direction du texte.
Nous pouvons spécifier la direction du texte dans HTML et CSS.
html a l'attribut dir, qui spécifie si le texte s'exécute de gauche à droite à travers la page (dir = "ltr"), de droite à gauche (dir = "rtl"), ou si le navigateur doit se décider en fonction de la langue utilisée (dir = "auto"). L'attribut DIR peut être appliqué à l'ensemble du document (la norme si le document entier utilise la même langue) ou à un élément individuel.
Au lieu d'utiliser l'attribut DIR dans HTML, nous pouvons utiliser la propriété de direction dans CSS. Pour spécifier le texte de gauche à droite, utilisez la direction: LTR et pour le texte de la droite à gauche, utilisez la direction: RTL.
Il n'a pas vraiment d'importance si nous définissons la direction du texte dans HTML ou CSS, bien qu'il soit souvent recommandé d'utiliser l'attribut DIR dans HTML, car cela garantit que le texte fonctionnera dans la bonne direction même si quelque chose ne va pas avec notre style feuille.
Nous pouvons également utiliser CSS pour spécifier que le texte fonctionne de haut en bas. Pour le texte vertical qui fonctionne de gauche à droite, nous utilisons le mode d'écriture: Vertical-LR, et pour le texte vertical qui fonctionne de droite à gauche, nous utilisons le mode d'écriture: Vertical-RL. (Il n'y a pas d'option DIR pour le texte vertical.)
Dans cet article, nous examinerons une série de démos qui comparent les effets des propriétés CSS physiques et logiques. Ces démos illustreront la direction du texte à l'aide d'un paragraphe composé d'émojis - une sorte de langage universel!
Dans le stylo ci-dessous, nous avons quatre boîtes contenant notre phrase emoji. Le premier est défini sur dir = "ltr" (le navigateur par défaut), le second à dir = "rtl", le troisième au mode d'écriture: vertical-lr, et le quatrième en mode d'écriture: vertical-rl.
Voir le stylo Propriétés logiques: direction du texte par SitePoint (@SitePoint) sur codepen.
Dans cette démo, vous pouvez voir comment les paramètres de direction du texte affectent l'ordre des caractères dans le paragraphe.
Mis à part: voyez comment les lignes s'alignent bien dans la démo ci-dessus? C'est grâce à la nouvelle valeur de sous-réseau dans la grille CSS. Nous avons couvert comment aligner les lignes avec un sous-réseau dans notre récent pointe rapide.
À mesure que CSS se développe et se développe, l'accent est moins mis sur les choses qui vont à gauche, à droite, de haut en bas sur un écran, et plus sur le flux de contenu. Vous connaissez peut-être les axes principaux et transversaux dans Flexbox, par exemple, qui varient en fonction de la direction dans laquelle le texte circule, tout comme la direction du contenu de la grille.
Le bloc CSS et les propriétés en ligne sont déterminés par la direction du texte. Dans l'image ci-dessous, la direction du bloc et de la ligne varie en fonction de la direction du texte.
Pour un paragraphe qui fonctionne de gauche à droite, comme celui-ci, la direction en ligne est gauche / droite, et la direction du bloc est en hausse / bas.
Les propriétés logiques sont définies en termes de dimensions de bloc et de ligne, qui échange automatiquement à mesure que la direction du texte change. Cela les rend beaucoup plus adaptables que les propriétés physiques.
Le début et la fin en ligne sont déterminés par où le texte commence et se termine, tout comme le début et la fin dans la direction du bloc.
Les propriétés logiques sont utiles pour tous les sites Web. Il existe de nombreuses situations où les sites Web monolingues pourraient bénéficier de l'utilisation de propriétés logiques.
Par exemple, vous pouvez vous retrouver à modifier la direction du texte d'un élément tout en utilisant des requêtes de support ou de conteneurs. Imaginez une rubrique avec une bordure rouge gauche. Sur les petits écrans, le titre peut être horizontal, au-dessus des paragraphes suivants. Sur les écrans larges, vous pouvez définir la rubrique pour afficher verticalement. L'image ci-dessous montre ce qui se passerait si vous utilisiez la bordure-gauche: 5px rouge solide sur le cap.
Une fois que le titre s'affiche verticalement, cette frontière gauche reste à gauche, alors que nous le voulons très probablement au début du texte. En utilisant des propriétés logiques, nous pouvons plutôt spécifier que la bordure rouge apparaît au début en ligne de la cap (démarrage en ligne), quelle que soit la direction dans laquelle il pointe, produisant le résultat illustré ci-dessous.
(vous pouvez consulter une démo en direct de cela sur codepen.)
Cela montre comment, avec les propriétés logiques, notre disposition est plus adaptable pour changer sans avoir à ajouter des CS supplémentaires pour différents scénarios.
En plus de cela, nous verrons également que les propriétés logiques offrent un certain nombre de raccourcis utiles qui aident à rendre le codage CSS plus efficace pour tout le monde - qu'il s'agisse de travailler avec plusieurs langues ou non.
Au lieu de la largeur et de la hauteur, qui sont basés sur l'écran physique, les propriétés logiques utilisent la taille en ligne et la taille de la taille de bloc. Pour décider lequel utiliser pour définir la largeur et la hauteur, nous devons savoir dans quelle direction le texte va.
Dans la démo ci-dessous, les paragraphes de la première ligne ont reçu une taille de bloc de 80px. Dans chaque cas, le 80px est réglé sur la direction du bloc, selon ce que cela peut être.
Comparez cela avec la deuxième ligne de paragraphes, qui sont chacun définis à la hauteur: 80px. Dans chaque cas, la hauteur est définie par rapport à l'écran.
Voir le stylo Propriétés logiques: taille (largeur et hauteur) par SitePoint (@SitePoint) sur codepen.
Les autres propriétés de taille incluent:
Voir la feuille de triche pour toutes les options de taille et comment les utiliser avec chaque direction du texte, ainsi que les informations de support du navigateur.
En utilisant des propriétés logiques, la marge est définie avec des variations de marge en ligne et de marge.
Pour les langues de gauche à droite, marge-inline-start: 40px appliquera une marge au début du texte (à gauche de l'écran). Lorsqu'elle est appliquée à un langage droit à gauche, cette marge apparaîtra à droite de l'écran. Pour le texte vertical, la marge apparaîtra en haut, comme indiqué dans la démo ci-dessous.
Comparez l'effet de la marge en ligne de démarrage appliqué à chaque paragraphe de la première ligne avec la marge-gauche: 40px appliqué à chaque paragraphe de la deuxième ligne de la démo ci-dessous.
Voir le stylo Propriétés logiques: marge par SitePoint (@SitePoint) sur codepen.
Les autres propriétés de marge comprennent:
Notez que la marge en ligne peut être utilisée comme raccourci pour la marge-gauche et la marge droite, qui est très pratique dans de nombreuses situations - comme la marge-intention: auto.
Voir la feuille de triche pour toutes les options de marge et les informations de support du navigateur.
En utilisant des propriétés logiques, le rembourrage est défini avec des variations de rembourrage en ligne et de blocage.
Pour les langues de gauche à droite, Padding-Block-Start: 40px appliquera un rembourrage en haut du texte (en haut de l'écran). Lorsqu'elle est appliquée à une langue de droite à gauche, ce rembourrage apparaît également en haut de l'écran. Pour le texte vertical, le rembourrage apparaîtra à gauche ou à droite, selon sa direction horizontale.
Comparez l'effet du stand de blocage dans la première ligne avec le padding-top: 40px appliqué à chaque paragraphe de la deuxième ligne dans la démo ci-dessous.
Voir le stylo Propriétés logiques: rembourrage par SitePoint (@SitePoint) sur codepen.
Les autres propriétés de rembourrage incluent:
Notez que le rembourrage en ligne peut être utilisé comme raccourci pour le rembourrage à gauche et le rembourrage.
Voir la feuille de triche pour toutes les options de rembourrage, dans chaque direction du texte, ainsi que les détails du support du navigateur.
Avez-vous rencontré la propriété d'encart très pratique? Il est utilisé pour le positionnement des éléments (comme lorsque vous utilisez la position: absolue). Par exemple, l'encart: 0 est un raccourci pour le haut: 0; à droite: 0; en bas: 0; gauche: 0;.
Essayons cela dans notre démo emoji. Les div contenant sont définis en position: relative et les paragraphes sont définis en position: Absolute. Les paragraphes de la première ligne sont définis sur l'inset-bloc-end: 30px, tandis que ceux de la deuxième ligne sont réglés physiquement en bas: 30px.
Voir le stylo Propriétés logiques: encadré par SitePoint (@SitePoint) sur codepen.
Les autres propriétés pour l'encart comprennent:
Remarquez le raccourci et le bloc d'ensemble et la ligne de l'insolution, qui peuvent être utilisés dans seulement deux directions. (Bloc inséré: 20px est équivalent à l'encart: 20px Auto. Voir une simple démo ici.)
Affichez la liste complète des propriétés d'encart et comment elles fonctionnent avec la direction du texte dans la feuille de triche.
Nous pouvons régler une bordure tout autour d'un élément avec la raccourci de la frontière, comme la bordure: 5px rouge solide. Mais si nous voulons simplement coiffer côtés particuliers d'un élément, nous avons soudainement affaire à la frontière, au fond de la frontière, à la frontière et à la frontière, pour lesquels il y a des équivalents logiques.
Les frontières sont un peu plus impliquées, car elles impliquent trois valeurs - la largeur (l'épaisseur de la bordure), le style (solide, pointillé, etc.), et la couleur.
Voyons ce qui se passe lorsque nous appliquons le démarrage en ligne: 5px rouge solide à nos paragraphes, et comparons cela avec la bordure-gauche: 5px rouge solide ;.
Voir le stylo Propriétés logiques: bordure par SitePoint (@SitePoint) sur codepen.
Les autres propriétés logiques pour la bordure comprennent:
Remarquez que la frontière en ligne est une belle sténographie pour la frontière: gauche et droite de la frontière dans le flux de gauche à droite, et bloc de bordure pour la frontière et le bas de la frontière.
Nous pouvons percer davantage dans les propriétés logiques des bordures pour cibler une seule valeur. Pour la largeur, nous en avons:
Pour le style, nous avons ceux-ci:
Pour la couleur, nous avons ceci:
Consultez la feuille de triche pour toutes les combinaisons et permutations de ces propriétés telles qu'elles s'appliquent à chaque direction texte.
Nous pouvons régler un rayon de bordure à tous les coins d'un élément avec la propriété Border-Radius. Si nous ciblons les coins individuels avec des propriétés physiques, nous nous considérons d'abord si c'est en haut ou en bas de l'élément, puis s'il est à gauche ou à droite de l'élément. Ainsi, le coin supérieur gauche est spécifié avec la border-top-left-radius.
Lors de la définition du rayon de bordure avec des propriétés logiques, au lieu de la ligne supérieure / inférieure-gauche / à droite, nous devons penser au bloc [start / fin] -inline [start-end].
c'est-à-dire pour choisir la bonne propriété pour un coin particulier, vous devez vous demander si c'est au début ou à la fin de la direction du bloc de l'élément et si c'est au début ou à la fin de la direction en ligne de l'élément, en donnant quatre possibles Options au milieu:
<span>p {
</span> <span>margin-block-start: 1em;
</span><span>}
</span>Dans la première ligne de la démo suivante, nous définissons un rayon de bordure de 20px au début du bloc et des instructions de texte en ligne avec le start-start-start-radius. Comparez cela avec la frontière-left-radius dans la deuxième ligne.
Voir le stylo Propriétés logiques: rayon de bordure par SitePoint (@SitePoint) sur codepen.
Il n'y a pas de raccourci spéciaux ici, donc si vous voulez vous lancer dans deux coins, vous devez faire quelque chose comme ceci:
-start-start- -end-start- -start-end- -end-end-
Oh bien! (Voir une démo de cela ici.)
Voir la feuille de triche pour toutes les options de rayon de bordure et les informations de support du navigateur. Il a fallu plus de temps pour que les propriétés logiques du rayon de bordure soient soutenues par les navigateurs, mais le support est désormais bon dans les navigateurs modernes.
Propriétés logiques pour le flotteur et l'adaptation Offrez de nouvelles options pour flotter et effacer un élément. Avant les propriétés logiques, les seules options étaient flottantes: gauche et flottement: droite, claire: gauche et claire: droite. Là où le texte était vertical, il n'y avait pas d'option pour flotter dans le même sens que le texte.
avec des propriétés logiques, les flottants et la compensation peuvent désormais être effectués spécifiquement par rapport au flux de texte en ligne, grâce à la mise en ligne et à la fin.
Dans la démo ci-dessous, un élément de portée est flotté avec la valeur logique-start en ligne, par rapport à la valeur physique laissée dans la deuxième ligne.
Voir le stylo Propriétés logiques: flotter par SitePoint (@SitePoint) sur codepen.
Les valeurs de démarrage en ligne et de terminaison en ligne s'appliquent également à la propriété claire. (Voici une démo de codepen de cela.)
Il n'y a pas besoin d'une alternative logique pour Clear: les deux, car elle efface déjà dans les deux directions en ligne - ce qui est assez logique!
Nous avons déjà des valeurs d'alignement de texte comme la gauche, la droite, le centre et la justification. Deux valeurs logiques ont également été ajoutées: Démarrer et fin. Ils peuvent être utilisés pour aligner le texte le long de l'axe en ligne, quelle que soit la direction dans laquelle il fonctionne.
Dans la démo ci-dessous, les paragraphes de la première ligne ont été définis sur Text-Align: End. Comme vous pouvez le voir, les emojis sont tous poussés à l'extrémité de l'axe en ligne.
Voir le stylo Propriétés logiques: alignement du texte par SitePoint (@SitePoint) sur codepen.
La feuille de triche montre comment appliquer les valeurs de démarrage et de fin pour fonctionner avec les différentes directions du texte.
La propriété de redimensionnement permet de redimensionner certains éléments dans des directions spécifiées, et maintenant il existe des options en ligne et en blocs.
La démo ci-dessous montre la différence entre le redimensionnement: en ligne et redimensionner: horizontal. (Il y a une petite poignée de redimensionnement dans le coin inférieur droit de chaque boîte que vous pouvez faire glisser.)
Voir le stylo Propriétés logiques: redimensionner par SitePoint (@SitePoint) sur codepen.
(Dans la démo ci-dessus, le redimensionnement de la boîte de droite à gauche est un peu sauvage car dir = "rtl" n'est pas appliqué à l'ensemble du document mais juste à la div contenant.)
Les propriétés physiques de Overflow-X et Overflow-y ont désormais des compléments logiques de débordement de débordement et de blocage.
Notez qu'il y a très peu de soutien à ces nouvelles propriétés au moment de la rédaction (avril 2024).
La propriété Overscroll-Behavior est une nouvelle qui affine comment les éléments débordants défilent. Nous ne nous plongerons pas ici, mais vous pouvez en savoir plus sur MDN.
Il suffit de dire qu'il existe des versions logiques de ces propriétés ainsi que physiques. Par exemple, Overscroll-Behavior-X pour les langues de gauche à droite peut être remplacé par Overscroll-Behavior-inline, etc. (Voir la feuille de triche pour une liste complète d'exemples.)
Prise en charge du navigateur pour les propriétés logiques CSS avancées rapidement au début des années 2020, et les propriétés logiques sont désormais fortement prises en charge dans les principaux navigateurs.
Les propriétés logiques ont le même poids que leurs homologues physiques, donc si vous vous inquiétez de l'expérience dans les navigateurs plus âgés, vous pouvez déclarer deux valeurs, comme ainsi:
<span>p {
</span> <span>margin-block-start: 1em;
</span><span>}
</span>Les navigateurs plus anciens utiliseront la première déclaration, tandis que les plus récents utiliseront la seconde.
Cependant, il serait fastidieux de dupliquer du code comme celui-ci tout au long d'une feuille de style, donc si vous êtes vraiment inquiet pour les navigateurs plus âgés, allez peut-être facilement sur les propriétés logiques pour l'instant.
Caniuse a un aperçu de la prise en charge de la propriété logique, et chaque section de la feuille de triche a également des liens pour prendre en charge des propriétés spécifiques.
Dans cet article, nous avons couvert presque chaque propriété logique actuellement disponible. (Vous pouvez également consulter les propriétés logiques pour la légende et pour le confinement de la taille si vous voulez aller plus loin.)
Si rien d'autre, cela vaut la peine de comprendre les propriétés logiques et comment les utiliser, même si vous choisissez de ne pas les utiliser pour l'instant. Au moins, vous comprendrez le nouveau code de propriété logique CSS qui apparaît sur le Web maintenant.
Les propriétés logiques offrent des avantages, même si vous ne travaillez pas sur des sites multilingues. Les différents raccourcis comme la marge en ligne sont très utiles et sont de bons outils à avoir dans votre kit.
Si vous avez lu directement dans cet article, vous devriez être en mesure de reconnaître les propriétés logiques partout où elles apparaissent. (Recherchez ces mots clés en bloc et en ligne!) J'espère que vous êtes également assez confiant pour les utiliser occasionnellement dans votre CSS - sauf si vous avez été inspiré pour aller ninja complet!
N'oubliez pas de télécharger nos propriétés logiques pratiques Fiche de triche PDF.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
