Nouveaux raccourcis pour les propriétés logiques et nouvelles propriétés d'encart pour Chromium.
Depuis Chromium 69 (3 septembre 2018), les propriétés et valeurs logiques aident les développeurs à garder le contrôle de leurs mises en page internationales à l'aide de styles logiques, plutôt que physiques, directionnels et de dimensions. Dans Chromium 87, des raccourcis et des décalages ont été publiés pour faciliter l'écriture de ces propriétés et valeurs logiques. Cela permet de relier Chromium à Firefox, qui est compatible avec les raccourcis depuis la version 66. Ils sont prêts dans la version preview de la technologie de Safari.
Flux de documents
Si vous connaissez déjà les propriétés logiques, ainsi que les axes intégrés et blocs, et que vous ne souhaitez pas vous rafraîchir la mémoire, vous pouvez ignorer cette étape. Sinon, voici un bref rappel.
En français, les lettres et les mots s'affichent de gauche à droite, tandis que les paragraphes sont empilés de haut en bas. En chinois traditionnel, les lettres et les mots sont empilés de haut en bas, tandis que les paragraphes sont empilés de droite à gauche. Rien que dans ces deux cas, si nous écrivons du code CSS qui ajoute une "marge supérieure" sur un paragraphe, nous n'espacerons qu'un seul style de langue de manière appropriée. Si la page est traduite en chinois traditionnel à partir de l'anglais, il est possible que la marge n'ait pas de sens dans le nouveau mode d'écriture verticale.
Par conséquent, l'aspect physique de la boîte n'est pas très utile au niveau international. C'est ainsi que commence le processus de prise en charge de plusieurs langues, en apprenant les aspects physiques et les aspects logiques du modèle de boîte.
Avez-vous déjà inspecté l'élément p dans les outils pour les développeurs Chrome ? Si tel est le cas, vous avez peut-être remarqué que les styles user-agent par défaut ne sont pas physiques, mais logiques.
p {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
CSS de la feuille de style user-agent de Chromium
La marge ne se trouve pas en haut ou en bas, comme pourrait le croire un lecteur anglophone.
C'est block-start et block-end ! Ces propriétés logiques s'apparentent à la partie inférieure et supérieure d'un lecteur anglais, mais également à celle d'un lecteur japonais, comme la partie droite et la gauche. Rédigé une seule fois, il fonctionne partout.
Le flux normal se produit lorsque la page Web fait intentionnellement partie de cette multidirectionnelle. Lorsque le contenu de la page est mis à jour en fonction des changements d'orientation du document, la mise en page et ses éléments sont considérés dans le flux. Pour en savoir plus sur les entrées et sorties du flux sur MDN ou dans la spécification du module d'affichage CSS, bien que les propriétés logiques ne soient pas obligatoires, elles font la majeure partie du travail lorsque l'orientation change. Le flux implique la direction, c'est-à-dire les lettres, les mots et les contenus qui doivent se déplacer. Cela nous amène à bloquer et à intégrer des directions logiques.
L'orientation des blocs correspond à la direction que suivent les nouveaux blocs de contenu. Par exemple, vous pouvez vous demander où placer le paragraphe suivant. Il s'agit peut-être d'un "bloc de contenu" ou d'un "bloc de texte".
Chaque langue organise ses blocs et les ordonne selon leurs block-axis respectifs. block-start est le côté vers lequel un paragraphe est placé en premier, tandis que block-end est le côté vers lequel s'écoulent les nouveaux paragraphes.
Par exemple, dans l'écriture manuscrite japonaise traditionnelle, la direction des blocs s'écoule de droite à gauche:
La direction intégrée correspond à la direction que prennent les lettres et les mots. Tenez compte de la direction que prennent votre bras et votre main lorsque vous écrivez, et le long de la inline-axis.
inline-start est le côté où vous commencez à écrire, tandis que inline-end est le côté où l'écriture se termine ou se termine. Dans la vidéo ci-dessus, le inline-axis est affiché de haut en bas, mais dans la vidéo suivante, le inline-axis s'affiche de droite à gauche.
La valeur flow-relative signifie que les styles écrits pour une langue seront contextuels et correctement appliqués dans d'autres langues. Le contenu sera diffusé en fonction de la langue dans laquelle il est diffusé.
Nouveaux raccourcis
Certains des raccourcis suivants ne sont pas des fonctionnalités nouvelles du navigateur, mais des moyens plus simples d'écrire des styles en tirant parti de la possibilité de définir des valeurs à la fois sur les bords bloc ou intégrés. Les propriétés logiques inset-* offrent de nouvelles possibilités, car il n'existait pas de méthode longue pour spécifier des positions absolues avec des propriétés logiques auparavant. Les encarts et les raccourcis fonctionnent si bien ensemble que je vais vous parler de toutes les nouvelles fonctionnalités de propriétés logiques arrivant dans Chromium 87 en une seule fois.
Raccourcis de la marge
Aucune nouvelle fonctionnalité n'est disponible, mais des raccourcis très pratiques l'ont fait:
margin-block et
margin-inline.
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
Pas de raccourci pour "en haut et en bas" ou "gauche et droite"... jusqu'à présent !
Vous faites probablement référence aux quatre côtés à l'aide du raccourci de margin: 10px;. Vous pouvez maintenant référencer facilement deux côtés complémentaires en utilisant le raccourci de propriété logique.
margin-inline-start: 4ch; margin-inline-end: 2ch;
margin-inline: 4ch 2ch;
Raccourcis de marge intérieure
Aucune nouvelle fonctionnalité disponible, mais des raccourcis plus pratiques:
padding-block et
padding-inline.
padding-block-start: 2ch; padding-block-end: 2ch;
padding-block: 2ch; /* or */ padding-block: 2ch 2ch;
Et l'ensemble de raccourcis inline sans frais:
padding-inline-start: 4ch; padding-inline-end: 2ch;
padding-inline: 4ch 2ch;
Encarts et raccourcis
Les propriétés physiques top, right, bottom et left peuvent toutes être écrites en tant que valeurs pour la propriété inset. Toute valeur de position peut bénéficier de la définition de côtés avec un encart.
.cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
inset: 0;
}
position: absolute; top: 1px; right: 2px; bottom: 3px; left: 4px;
position: absolute; inset: 1px 2px 3px 4px;
Cela devrait vous paraître pratique immédiatement ! L'encart est un raccourci pour les côtés physiques. Il fonctionne comme une marge et une marge intérieure.
Nouvelles fonctionnalités
Aussi passionnant que soit le raccourci des côtés physiques, les caractéristiques logiques sont encore plus riches grâce à d'autres raccourcis inset. Ces raccourcis permettent aux développeurs de créer plus facilement (ils sont plus courts) et augmentent également la couverture potentielle de la mise en page, car ils sont relativement fluides.
position: absolute; top: 10px; bottom: 10px;
position: absolute; inset-block: 10px;
position: absolute; left: 10px; right: 20px;
position: absolute; inset-inline: 10px 20px;
Des informations complémentaires et une liste complète des encarts abrégés et longs sont disponibles sur MDN.
Raccourcis de bordure
Border, ainsi que ses propriétés color, style et width imbriquées, font également l'objet de nouveaux raccourcis logiques.
border-top-color: hotpink; border-bottom-color: hotpink;
border-block-color: hotpink; /* or */ border-block-color: hotpink hotpink;
border-left-style: dashed; border-right-style: dashed;
border-inline-style: dashed; /* or */ border-inline-style: dashed dashed;
border-left-width: 1px; border-right-width: 1px;
border-inline-width: 1px; /* or */ border-inline-width: 1px 1px;
Des informations complémentaires et une liste complète des raccourcis et des versions longues des bordures sont disponibles sur MDN.
Exemple de propriété logique <figure>
Récapitulons tout cela avec un petit exemple. Les propriétés logiques peuvent mettre en page une image avec une légende pour gérer différentes orientations d'écriture et de document.
Ou essayez-le !
Vous n'avez pas grand-chose à faire pour rendre une carte responsive à l'échelle internationale avec un élément <figure> et quelques propriétés logiques. Si vous souhaitez savoir comment tous ces CSS adoptés à l'échelle internationale fonctionnent ensemble, j'espère que cette présentation vous sera utile.
Polyremplissage et compatibilité avec plusieurs navigateurs
Les outils Cascade ou de compilation sont des options viables pour disposer à la fois des anciens et des nouveaux navigateurs, correctement espacés avec des propriétés logiques mises à jour. Pour les créations de remplacement Cascade, suivez une propriété physique par une propriété logique. Le navigateur utilisera la "dernière" propriété trouvée lors de la résolution du style.
p {
/* for unsupporting browsers */
margin-top: 1ch;
margin-bottom: 2ch;
/* for supporting browsers to use */
/* and unsupporting browsers to ignore and go 🤷♂️ */
margin-block: 1ch 2ch;
}
Cependant, ce n’est pas une solution
complète pour tout le monde. Voici une création de remplacement manuscrite qui exploite le pseudo-sélecteur :lang() pour cibler des langues spécifiques, ajuste leur espacement physique de manière appropriée, puis offre l'espace logique pour les navigateurs compatibles:
/* physical side styles */
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
/* adjusted physical side styles per language */
:lang(ja) {
p {
/* zero out styles not useful for traditional Japanese */
margin-top: 0;
margin-bottom: 0;
/* add appropriate styles for traditional Japanese */
margin-right: 1ch;
margin-left: 2ch;
}
}
/* add selectors and adjust for languages all supported */
:lang(he) {…}
:lang(mn) {…}
/* Logical Sides */
/* Then, for supporting browsers to use */
/* and unsupporting browsers to ignore #TheCascade */
p {
/* remove any potential physical cruft.. */
margin: 0;
/* explicitly set logical value */
margin-block: 1ch 2ch;
}
Vous pouvez également utiliser @supports pour déterminer s'il faut fournir ou non des propriétés physiques de remplacement:
p {
margin-top: 1ch;
margin-bottom: 2ch;
}
@supports (margin-block: 0) {
p {
margin-block: 1ch 2ch;
}
}
Sass, PostCSS, Emotion et d'autres proposent des offres groupées automatisées et/ou de la création d'offres ponctuelles comportant un large éventail de solutions de remplacement ou de solutions. Consultez-les pour voir laquelle correspond à votre chaîne d'outils et à votre stratégie globale de site.
Étapes suivantes
Davantage de CSS proposeront des propriétés logiques, ce n'est pas encore fait ! Il manque toutefois un grand ensemble de raccourcis et une résolution est toujours en attente sur ce problème GitHub. Il existe une solution temporaire dans un brouillon. Et si vous voulez styliser tous les côtés logiques d'une case avec un raccourci ?
margin: 1px 2px 3px 4px; margin: 1px 2px; margin: 2px;
margin: logical 1px 2px 3px 4px; margin: logical 1px 2px; margin: logical 2px;
Le brouillon de proposition actuel impliquerait que vous deviez écrire logical dans chaque raccourci pour appliquer l'équivalent logique, ce qui ne semble pas très DRY pour certains.
Il existe d'autres propositions de modification au niveau du bloc ou de la page, mais cela pourrait entraîner des utilisations logiques dans les styles qui supposent encore des côtés physiques.
html {
flow-mode: physical;
/* or */
flow-mode: logical;
/* now all margin/padding/etc references are logical */
}
/* hopefully no 3rd/1st party code is hard coded to top/left/etc ..? */
C'est une question difficile ! Votez, donnez votre avis : votre avis nous intéresse.
Vous voulez en savoir plus sur les propriétés logiques ou les étudier ? Voici une documentation de référence détaillée, ainsi que des guides et des exemples, sur MDN 🤓
Commentaires
- Pour proposer des modifications de la syntaxe CSS des raccourcis relatifs au flux, commencez par vérifier les problèmes existants dans le dépôt csswg-drafts. Si aucun des problèmes existants ne correspond à votre proposition, signalez un nouveau problème.
- Pour signaler des bugs dans l'implémentation dans Chromium de raccourcis relatifs au flux, commencez par vérifier les problèmes existants dans l'outil de suivi des bugs de Chromium. Si aucun des problèmes existants ne correspond à votre bug, signalez-en un nouveau.