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 commenormal
.
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;
}
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;
}
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; }
reading-flow: grid-rows
.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.