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 la déconnexion de la mise en page CSS et de l'ordre des sources. Cela a permis de détailler une proposition qui est discutée dans le groupe de travail CSS, afin de résoudre le problème de réorganisation éléments dans Flexbox et la grille provoque une déconnexion de l'expérience de tabulation. La la première section de ce post décrit le problème auquel le groupe de travail est confronté à résoudre. La situation a évolué depuis, et ce post en bref de notre situation actuelle. Il existe aussi un domaine spécifique dans lequel commentaires : comment traiter les éléments comportant display-contents ?

Mises à jour de la proposition

Il y a maintenant texte de la spécification brouillon dans les spécifications du niveau 4 de l'affichage CSS. 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 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, qui est la valeur actuelle comportemental.
• flex-visual: ne s'applique qu'aux conteneurs flexibles. Suit les 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 le flux flexible dans la direction souhaitée.
• grid-rows: ne prend effet que sur les conteneurs de grille. Suit l’élément visuel ordre 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 d'éléments de grille par colonne, en tenant compte du mode d'écriture.
• grid-order: ne prend effet que sur les conteneurs de grille. Prend en compte la propriété order, mais agit autrement comme normal.

Par exemple, si vous avez trois éléments flexibles dans un conteneur, et définir son flex-direction sur row-reverse, ils sont alignés à partir de la fin du conteneur flexible et de l'ordre de tabulation. se déplace de droite à gauche.

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

Ajoutez flex-flow: visual. Le flux de lecture suivra l'ordre visuel dans anglais, donc 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 que celui de la source. Dans l'exemple suivant, le flux de lecture suit le 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 encore au stade expérimental, mais il est possible de l'activer à des fins de test. Pour l'essayer, installez Chrome pour les développeurs ou Canary version 128 ou ultérieure. et activez le paramètre indicateur d'exécution CSSReadingFlow. Voici quelques exemples pour vous aider, qui fonctionnent tous en Canary avec l'indicateur activé.

Le comportement pour display: contents cas est toujours en cours d'élaboration et pourrait en fonction des commentaires que vous fournissez après avoir lu la section suivante de ce post.

Éléments avec display: contents et des composants Web

Il y a un problème en suspens. au groupe de travail CSS de décider de la manière de gérer la situation Les enfants d'un élément avec un flux de lecture ont display: contents, et de la même manière s'il s'agissait d'une <slot>.

Dans l'exemple suivant, les éléments <div> ont display: contents. Motif : cela, tous les éléments <button> sont promus pour participer au flexibilité. mise en page. Ainsi, reading-flow tient 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 peuvent expliquer cette situation comme le montre cet exemple. Avez-vous déjà besoin de réorganiser des articles se trouvant à l'intérieur d'une contenant des éléments display: contents qui ne sont pas des frères et sœurs, en raison de être frère et sœur de l'élément qui comporte display: contents.

De plus, nous nous efforçons de résoudre les problèmes liés à display: contents. il peut être utile de voir des exemples dans lesquels vous pourriez utiliser le Propriété reading-flow avec display: contents. Comprendre le monde réel les cas d'utilisation dont vous disposez nous aideront à concevoir une solution adaptée à vos besoins.

Ajoutez des cas d'utilisation Problème concernant le 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 qui serait incroyablement utile quand nous arrivons à discuter de ce problème en tant que groupe. Si vous avez des réflexions sur ce à quoi vous vous attendez, c'est aussi utile. Toutefois, le plus important est de voir les cas d'utilisation réels.