Nouveaux raccourcis de propriétés logiques et nouvelles propriétés d'encart pour Chromium.
Depuis Chromium 69 (3 septembre 2018), les propriétés logiques et les valeurs ont aidé les développeurs à garder le contrôle de leurs mises en page internationales grâce à des styles de direction et de dimension logiques plutôt que physiques. Dans Chromium 87, des raccourcis et des décalages ont été introduits pour faciliter l'écriture de ces propriétés et valeurs logiques. Cela permet de rattacher Chromium à Firefox, qui accepte les raccourcis depuis la version 66. Safari les propose dans sa version preview technique.
Flux de documents
Si vous connaissez déjà les propriétés logiques, les axes alignés et les axes de blocs, et que vous ne souhaitez pas rafraîchir vos connaissances, vous pouvez passer à l'étape suivante. Sinon, voici un bref rappel.
En français, les lettres et les mots s'écoulent de gauche à droite, tandis que les paragraphes sont empilés de haut en bas. En chinois traditionnel, les lettres et les mots se trouvent de haut en bas, tandis que les paragraphes sont empilés de droite à gauche. Dans ces deux cas seulement, si nous écrivons du code CSS qui place la marge supérieure d'un paragraphe sur un paragraphe, nous n'espaceons qu'un seul style de langue de manière appropriée. Si la page est traduite en chinois traditionnel à partir de l'anglais, la marge risque de ne pas avoir de sens dans le nouveau mode d'écriture verticale.
Par conséquent, la partie physique de la boîte n'est pas très utile à l'international. C'est ainsi que commence le processus de prise en charge de plusieurs langues, en apprenant à distinguer les côtés physique et logique du modèle de boîte.
Avez-vous déjà inspecté l'élément p
dans Chrome DevTools ? Si c'est le cas, vous avez peut-être remarqué que les styles par défaut de l'user-agent 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 n'est pas située en haut ou en bas, comme le croit un lecteur anglophone.
Il s'agit de block-start
et block-end
. Ces propriétés logiques sont semblables à celles d'un lecteur anglophone pour le haut et le bas, mais également à celles d'un lecteur japonais pour la droite et la gauche. Rédigé une seule fois, il fonctionne partout.
On parle de "flux normal" lorsque la page Web fait intentionnellement partie de cette multidirectionnelle. Lorsque le contenu de la page est mis à jour en fonction de la modification de l'orientation du document, la mise en page et ses éléments sont considérés comme en flux. Pour en savoir plus sur les flux "in" et "out", consultez MDN ou la spécification du module d'affichage CSS. Bien que les propriétés logiques ne soient pas obligées d'être dans un flux, elles vous déchargent d'une grande partie de la tâche lorsque la directionnalité change. Le flux implique une direction, c'est-à-dire les lettres, les mots et le contenu qui doivent suivre. Nous en arrivons donc à des instructions logiques en bloc et en ligne.
L'orientation des blocs correspond à la direction que suivent les nouveaux blocs de contenu. Par exemple, vous vous demandez "où placer le paragraphe suivant ?". Vous pouvez le considérer comme un "bloc de contenu" ou un "bloc de texte".
Chaque langue organise ses blocs et les classe en fonction de leur block-axis
respective. block-start
correspond au côté où un paragraphe est placé en premier, tandis que block-end
correspond au côté vers lequel les nouveaux paragraphes s'écoulent.
Dans l'écriture manuscrite japonaise traditionnelle, par exemple, le sens de chaque bloc est de droite à gauche :
La direction dans le texte est la direction des lettres et des mots. Tenez compte de la direction dans laquelle votre bras et votre main se déplacent lorsque vous écrivez. Ils se déplacent le long de l'inline-axis
.
inline-start
correspond au côté où vous commencez à écrire, tandis que inline-end
correspond au côté où l'écriture se termine ou se poursuit. Dans la vidéo ci-dessus, le inline-axis
s'écoule de haut en bas, mais dans la vidéo suivante, il s'écoule de droite à gauche.
flow-relative
signifie que les styles écrits pour une langue seront appliqués de manière contextuelle et appropriée 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 de nouvelles fonctionnalités pour le navigateur, mais des moyens plus simples d'écrire des styles en profitant de la possibilité de définir des valeurs à la fois sur les bords de bloc et en ligne. Les propriétés logiques inset-*
apportent de nouvelles fonctionnalités, car il n'existait auparavant aucun moyen de spécifier des positions absolues avec des propriétés logiques. Les encarts et les raccourcis (héhe) s'assemblent si bien que je vais vous parler de toutes les nouvelles propriétés logiques qui arrivent dans Chromium 87 en même temps.
Abréviations de marge
Aucune nouvelle fonctionnalité n'a été publiée, mais de nouvelles abréviations très pratiques ont été ajoutées :
margin-block
et
margin-inline
.
margin-block-start: 2ch; margin-block-end: 2ch;
margin-block: 2ch; /* or */ margin-block: 2ch 2ch;
Il n'existe pas de raccourci pour "haut et bas" ou "gauche et droite"… jusqu'à présent !
Vous faites probablement référence aux 4 côtés en utilisant le raccourci de margin: 10px;
. Désormais, vous pouvez facilement référencer 2 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 remplissage
Aucune nouvelle fonctionnalité n'a été publiée, mais de nouvelles abréviations très pratiques ont été ajoutées :
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
offert :
padding-inline-start: 4ch; padding-inline-end: 2ch;
padding-inline: 4ch 2ch;
Encadré et abréviations
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 une marge intérieure.
.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;
Ça devrait vous sembler pratique tout de suite ! L'encart est un raccourci pour les côtés physiques. Il fonctionne exactement comme la marge et la marge intérieure.
Nouvelles fonctionnalités
Aussi passionnant que soit le raccourci des côtés physiques, il y a encore plus des caractéristiques logiques fournies par les raccourcis inset
supplémentaires. Ces raccourcis facilitent la création par les développeurs (ils sont plus courts à saisir), mais ils augmentent également la couverture potentielle de la mise en page, car ils sont relatifs au flux.
position: absolute; top: 10px; bottom: 10px;
position: absolute; inset-block: 10px;
position: absolute; left: 10px; right: 20px;
position: absolute; inset-inline: 10px 20px;
Une documentation complémentaire et une liste complète des raccourcis et des abréviations en encart sont disponibles sur MDN.
Raccourcissement des bordures
La bordure, ainsi que ses propriétés color
, style
et width
imbriquées, disposent également 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;
Pour en savoir plus et obtenir la liste complète des raccourcis et des notations longues pour les bordures, consultez MDN.
Exemple de propriété logique <figure>
Récapitulons tout cela dans un petit exemple. Les propriétés logiques peuvent mettre en page une image avec une légende pour gérer différentes directions d'écriture et de document.
Ou essayez !
Il n'est pas nécessaire de faire grand-chose pour rendre une fiche responsive à l'international avec un <figure>
et quelques propriétés logiques. Si vous souhaitez en savoir plus sur la façon dont tous ces CSS respectueux des normes internationales fonctionnent ensemble, j'espère que cet article vous aura été utile.
Polyfilling et compatibilité multinavigateur
Les outils Cascade ou de compilation sont des options viables pour que les anciens et les nouveaux navigateurs soient identiques, correctement espacés et avec des propriétés logiques mises à jour. Pour les remplacements en 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;
}
Ce n'est cependant pas une solution complète pour tous. Voici un fallback manuscrit qui utilise le pseudo-sélecteur :lang()
pour cibler des langues spécifiques, ajuste leur espacement physique de manière appropriée, puis propose à la fin l'espacement 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 si des propriétés physiques de remplacement doivent être fournies:
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 de bundler et/ou de temps de compilation automatisés qui disposent d'un large éventail de solutions de secours ou de solutions. Examinez chacun d'eux pour déterminer celui qui correspond à votre chaîne d'outils et à votre stratégie globale pour votre site.
Étape suivante
Davantage de propriétés 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 dans ce problème GitHub. Une solution temporaire est en cours d'élaboration. Et si vous voulez styliser tous les côtés logiques d'une boîte 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;
La proposition actuelle implique que vous deviez écrire logical
dans chaque raccourci pour que l'équivalent logique soit appliqué, ce qui ne semble pas très DRY pour certains.
D'autres propositions visent à le modifier au niveau du bloc ou de la page, mais cela pourrait entraîner des fuites d'utilisations logiques dans des styles qui supposent toujours 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, exprimez votre opinion, nous avons besoin de vous.
Vous souhaitez en savoir plus sur les propriétés logiques ? Voici une 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 à débit relatif, 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, créez un problème.
- Pour signaler des bugs dans l'implémentation de Chromium des 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, créez un nouveau problème.