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.

Adam Argyle

Oriol Brufau

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é publiés pour faciliter l'écriture de ces propriétés et valeurs logiques. Chromium rattrape ainsi Firefox, qui est compatible avec 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 en ligne et les axes en bloc, et que vous ne souhaitez pas rafraîchir vos connaissances, vous pouvez passer à l'étape suivante. Sinon, voici un bref rappel.

En anglais, les lettres et les mots s'écrivent de gauche à droite, tandis que les paragraphes sont empilés de haut en bas. En chinois traditionnel, les lettres et les mots sont disposés de haut en bas, tandis que les paragraphes sont empilés de droite à gauche. Dans ces deux cas, si nous écrivons du code CSS qui met "margin top" sur un paragraphe, nous n'espacerons correctement qu'un style de langue. 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 de l'user-agent de Chromium

La marge ne se trouve pas en haut ou en bas, comme un lecteur anglophone pourrait le croire. 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. Écrit une fois, fonctionne partout.

Le flux normal est celui où la page Web fait partie de cette multidirectionnalité intentionnellement. 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 facilitent la tâche lorsque la directionnalité change. La fluidité implique une direction, que les lettres, les mots et le contenu doivent suivre. Nous en arrivons donc à des instructions logiques en bloc et en ligne.

La direction des blocs indique le sens dans lequel les nouveaux blocs de contenu doivent être placés. Par exemple, vous pouvez vous demander "Où placer le prochain paragraphe ?". 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.inline-axis

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 pour 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 ou 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 marges intérieures et les raccourcis vont (héhé) si bien ensemble que je vais vous parler de toutes les nouvelles fonctionnalités de 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 quatre côtés à l'aide de l'abréviation margin: 10px;. Vous pouvez désormais facilement faire référence à deux côtés complémentaires à l'aide de l'abréviation de la propriété logique.

margin-inline-start: 4ch;
margin-inline-end: 2ch;

margin-inline: 4ch 2ch;

Raccourcis de marge intérieure

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 complémentaires inline:

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 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 sembler immédiatement pratique. L'encart est un raccourci pour les côtés physiques. Il fonctionne comme la marge et la marge intérieure.

Nouvelles fonctionnalités

Aussi excitant que soit le raccourci des côtés physiques, les fonctionnalités logiques apportées par les raccourcis inset supplémentaires sont encore plus intéressantes. 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;

Pour en savoir plus et obtenir la liste complète des abréviations et des écritures longues, consultez MDN.

Abréviations de bordure

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-le !

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 vous devez fournir ou non des valeurs de remplacement pour les propriétés physiques:

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-les pour déterminer laquelle correspond à votre chaîne d'outils et à votre stratégie globale pour votre site.

Étape suivante

D'autres propriétés logiques seront proposées dans le CSS. Cependant, un grand ensemble de raccourcis est manquant, et la résolution de ce problème GitHub est toujours en attente. Une solution temporaire est en cours d'élaboration. Que faire si vous souhaitez styliser tous les côtés logiques d'une boîte avec une abréviation ?

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 et donnez votre avis : nous avons besoin de vous.

Vous souhaitez en savoir plus sur les propriétés logiques ? Vous trouverez une référence détaillée, ainsi que des guides et des exemples sur MDN. 🤓

Commentaires

• Pour proposer des modifications à la syntaxe CSS des raccourcis relatifs au flux, commencez par consulter 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 liés à l'implémentation des raccourcis relatifs au flux dans Chromium, commencez par consulter 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.