Demande de commentaires de développeurs sur le flux de lecture et les éléments avec affichage: contenus

Rachel Andrew

L'année dernière, nous avons publié l'article de blog Résoudre le problème de dissociation entre la mise en page CSS et l'ordre des sources. Il s'agissait d'une proposition discutée dans le groupe de travail CSS, visant à résoudre le problème de réorganisation des éléments dans flexbox et grid qui entraîne une expérience de tabulation dissociée. La section de début de ce post décrit le problème que le groupe de travail tente de résoudre. Les choses ont bougé depuis, et ce post vous donne une brève mise à jour de notre situation actuelle. Nous avons également besoin de votre avis sur un point spécifique : comment traitons-nous les éléments associés à display-contents ?

Mises à jour de la proposition

Un texte de projet de spécification figure désormais dans la spécification CSS Display Level 4. Une nouvelle propriété appelée reading-flow est introduite. Cette propriété est ajoutée à l'élément contenant pour la mise en page flex ou grille (l'élément avec display: grid ou display: flex).

La propriété accepte les valeurs suivantes:

• normal: suit l'ordre des éléments dans le DOM, ce qui correspond au comportement actuel.
• flex-visual: ne s'applique qu'aux conteneurs flexibles. Suit l'ordre de lecture visuel des éléments Flex, en tenant compte du mode d'écriture.
• flex-flow: n'a d'effet que sur les conteneurs Flex. Suit la direction du flux flexible.
• grid-rows: n'a d'effet que sur les conteneurs de grille. Suit l'ordre visuel des éléments de la grille par ligne, en tenant compte du mode d'écriture.
• grid-columns: n'a d'effet que sur les conteneurs de grille. Suit l'ordre visuel des éléments de la grille par colonne, en tenant compte du mode d'écriture.
• grid-order: n'a d'effet que sur les conteneurs de grille. Prend en compte la propriété order, mais agit par ailleurs comme normal.

Par exemple, si vous avez trois éléments Flex dans un conteneur et que vous définissez leur flex-direction sur row-reverse, ils s'alignent à partir de la fin du conteneur Flex et l'ordre des onglets se déplace de droite à gauche.

.flex {
  display: flex;
  flex-direction: row-reverse;
}

Ajoutez flex-flow: visual, puis le flux de lecture suivra l'ordre visuel en anglais, c'est-à-dire de gauche à droite.

.flex {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}

Dans les mises en page en grille, utilisez reading-flow pour suivre les lignes ou colonnes visuelles plutôt que l'ordre de la source. Dans l'exemple suivant, le flux de lecture suit les lignes.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-template-areas: "d b b"
                       "c c a";
  reading-flow: grid-rows;
}

.a { grid-area: a; }
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }

Essayer

Cette propriété CSS est actuellement expérimentale, mais vous pouvez l'activer pour les tests. Pour tester cette fonctionnalité, installez la version 128 ou ultérieure de Chrome Dev ou Canary, puis activez l'indicateur de durée d'exécution CSSReadingFlow. Voici quelques exemples pour vous aider à vous lancer, qui fonctionnent tous dans Canary lorsque l'indicateur est activé.

Le comportement des cas display: contents est toujours en cours d'élaboration et peut changer en fonction des commentaires que vous nous enverrez après avoir lu la section suivante de cet article.

Éléments avec display: contents et composants Web

Le groupe de travail CSS doit résoudre un problème non résolu concernant la gestion de la situation où l'un des enfants d'un élément avec un flux de lecture a display: contents, et de même si l'élément était un <slot>.

Dans l'exemple suivant, les éléments <div> ont display: contents. De ce fait, tous les éléments <button> sont promus pour participer à la mise en page flexible. reading-flow prend donc en compte leur ordre.

 .wrapper {
   display: flex;
   reading-flow: flex-visual;
 }

<div class="wrapper">
   <div style="display: contents" id="contents1">
     <button style="order: 3" id="o3">3</button>
     <button style="order: 1" id="o1">1</button>
     <div style="display: contents" id=contents2>
       <button style="order: 4" id="o4">4</button>
       <button style="order: 2" id=o2>2</button>
     </div>
   </div>
 </div>

Nous aimerions savoir si vous avez des exemples concrets qui expliquent la situation présentée dans cet exemple. Avez-vous déjà besoin de réorganiser les éléments qui se trouvent à l'intérieur d'un élément qui contient display: contents par des éléments qui ne sont pas frères, car ils sont frères de l'élément qui contient display: contents ?

De plus, alors que nous nous efforçons de résoudre les problèmes liés à display: contents, il serait utile de voir des exemples d'utilisation de la propriété reading-flow avec display: contents. Comprendre vos cas d'utilisation concrets nous aidera à concevoir une solution adaptée à vos besoins.

Ajoutez des cas d'utilisation au problème du groupe de travail CSS. Si vous avez des exemples sur des sites en ligne, ou si vous pouvez créer une démo sur CodePen ou JSFiddle, cela nous sera très utile pour discuter de ce problème en groupe. Si vous avez des idées sur ce que vous attendez, cela peut également être utile. Toutefois, l'essentiel est de voir les cas d'utilisation réels.