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. Chromium rattrape ainsi Firefox, qui est compatible avec les raccourcis depuis la version 66. Safari les propose dans sa version preview technique.

Le texte d'un 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 du document

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.

L'aspect physique de la boîte n'est donc 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 correspond à une page Web qui 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 déchargent d'une grande partie de 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 considérer cela 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 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.

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 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.


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

En cursive
padding-inline-start: 4ch;
padding-inline-end: 2ch;
Nouveau raccourci
padding-inline: 4ch 2ch;

Encart 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 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;

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.

Écriture manuscrite
position: absolute;
top: 10px;
bottom: 10px;
Raccourci logique
position: absolute;
inset-block: 10px;


Caractère long physique
position: absolute;
left: 10px;
right: 20px;
Raccourci 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.

Abréviations de bordure

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;
Raccourci logique
border-block-color: hotpink;
/* or */
border-block-color: hotpink hotpink;


Caractère long physique
border-left-style: dashed;
border-right-style: dashed;
Raccourci logique
border-inline-style: dashed;
/* or */
border-inline-style: dashed dashed;


Caractère long physique
border-left-width: 1px;
border-right-width: 1px;
Abréviation logique
border-inline-width: 1px;
/* or */
border-inline-width: 1px 1px;

Des informations complémentaires ainsi qu'une liste complète des raccourcis et des abréviations de bordures sont disponibles sur 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 savoir comment tout ce CSS à l'échelle internationale fonctionne ensemble, j'espère que cette introduction vous sera 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 créations de remplacement Cascade, suivez une propriété physique avec une propriété logique. Le navigateur utilisera la "dernière" propriété qu'il a 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, cette solution n'est pas tout à fait 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 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;
 
}
}

Les solutions Sass, PostCSS et Emotion, entre autres, proposent des packages automatiques et/ou des offres au moment de la compilation qui proposent un large éventail de solutions de remplacement ou de solutions de remplacement. 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. 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;
Abréviation 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 : votre avis nous intéresse.

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