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 Solving the CSS layout and source order disconnect (Résoudre le décalage entre la mise en page CSS et l'ordre de la source). Cette proposition détaillée, discutée au sein du groupe de travail CSS, vise à résoudre le problème de déconnexion de la navigation au clavier lorsque des éléments sont réorganisés dans une mise en page Flexbox ou en grille. 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 évolué depuis, et cet article vous donne un bref aperçu de la situation actuelle. Nous avons également besoin de vos commentaires sur un point spécifique : comment gérer les éléments qui comportent display-contents ?

Modifications apportées à la proposition

Un texte de spécification provisoire est désormais disponible dans la spécification CSS Display Level 4. Cela introduit une nouvelle propriété appelée reading-flow. Cette propriété est ajoutée à l'élément conteneur pour la mise en page flexible ou en grille (l'élément avec display: grid ou display: flex).

La propriété accepte les valeurs suivantes :

• normal : suivez l'ordre des éléments dans le DOM, qui est le comportement actuel.
• flex-visual : ne prend effet que sur les conteneurs flexibles. Suit l'ordre de lecture visuel des éléments Flex, en tenant compte du mode d'écriture.
• flex-flow : ne prend effet que sur les conteneurs flexibles. Suit la direction du flux flex.
• grid-rows : ne prend 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 : ne prend 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 : ne prend effet que sur les conteneurs de grille. Tient compte de la propriété order, mais se comporte 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 de tabulation passe de droite à gauche.

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

Ajoutez flex-flow: visual. Le flux de lecture suivra ensuite 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 les colonnes visuelles plutôt que l'ordre 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 il est possible de l'activer pour les tests. Pour l'essayer, installez la version 128 ou ultérieure de Chrome Dev ou Canary, puis activez le flag d'exécution CSSReadingFlow. Vous trouverez quelques exemples pour vous aider à démarrer. Ils fonctionnent tous dans Canary avec le flag activé.

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

Éléments avec display: contents et composants Web

Le groupe de travail CSS doit encore décider comment gérer la situation où l'un des enfants d'un élément avec reading-flow 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. Par conséquent, tous les éléments <button> sont promus pour participer à la mise en page flexible, et reading-flow tient donc compte de 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 provoquent la situation illustrée dans cet exemple. Avez-vous déjà eu besoin de réorganiser des éléments à l'intérieur d'un élément qui a display: contents avec des éléments qui ne sont pas frères, car ils sont frères de l'élément qui a display: contents.

De plus, comme nous nous efforçons de résoudre les problèmes liés à display: contents, il serait utile de voir des exemples où vous pourriez vouloir utiliser la propriété reading-flow avec display: contents. Comprendre vos cas d'utilisation concrets nous aidera à concevoir une solution qui répond à 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 lorsque nous discuterons de ce problème en groupe. Si vous avez une idée de ce qui devrait se passer, c'est également utile. Toutefois, le plus important est de voir les cas d'utilisation réels.