Améliorations de la mise en page logique avec des raccourcis relatifs au flux

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.

Le texte d'espace réservé est affiché en latin, en hébreu et en japonais dans un cadre d'appareil. Des flèches et des couleurs suivent le texte pour aider à associer les deux directions de bloc et d'in-line.

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.

En cursive
margin-block-start: 2ch;
margin-block-end: 2ch;
Nouveau raccourci
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.

En cursive
margin-inline-start: 4ch;
margin-inline-end: 2ch;
Nouveau raccourci
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.


En cursive
padding-block-start: 2ch;
padding-block-end: 2ch;
Nouveau raccourci
padding-block: 2ch;
/* or */
padding-block: 2ch 2ch;

Et l'ensemble de raccourcis inline offert :

En cursive
padding-inline-start: 4ch;
padding-inline-end: 2ch;
Nouveau raccourci
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;
}


Écriture manuscrite
position: absolute;
top: 1px;
right: 2px;
bottom: 3px;
left: 4px;
Nouveau raccourci physique
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.

Écriture manuscrite
position: absolute;
top: 10px;
bottom: 10px;
Abréviation logique
position: absolute;
inset-block: 10px;


Écriture manuscrite
position: absolute;
left: 10px;
right: 20px;
Abréviation logique
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.


Écriture manuscrite
border-top-color: hotpink;
border-bottom-color: hotpink;
Abréviation logique
border-block-color: hotpink;
/* or */
border-block-color: hotpink hotpink;


Écriture manuscrite
border-left-style: dashed;
border-right-style: dashed;
Abréviation logique
border-inline-style: dashed;
/* or */
border-inline-style: dashed dashed;


Écriture manuscrite
border-left-width: 1px;
border-right-width: 1px;
Abréviation logique
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 ?

Sténographie physique
margin: 1px 2px 3px 4px;
margin: 1px 2px;
margin: 2px;
Raccourci logique
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