Letztes Jahr haben wir den Blogpost Probleme mit der Übereinstimmung von CSS-Layout und Quellreihenfolge beheben veröffentlicht.
Darin wurde ein Vorschlag beschrieben, der in der CSS-Arbeitsgruppe diskutiert wurde und das Problem lösen soll, dass durch die Neuanordnung von Elementen in Flexbox und Grid die Tabulatortaste nicht mehr ordnungsgemäß funktioniert. Im ersten Abschnitt dieses Beitrags wird das Problem beschrieben, das die Arbeitsgruppe lösen möchte. Seitdem hat sich viel getan. In diesem Beitrag geben wir einen kurzen Überblick darüber, wo wir jetzt stehen. Wir benötigen auch Ihr Feedback zu einem bestimmten Thema: Wie gehen wir mit Artikeln um, die display-contents
enthalten?
Aktualisierungen des Angebots
In der CSS-Spezifikation für Displays der 4. Ebene gibt es jetzt einen Entwurfstext.
Es wird eine neue Property namens reading-flow
eingeführt.
Diese Property wird dem übergeordneten Element für das Flex- oder Grid-Layout hinzugefügt (das Element mit display: grid
oder display: flex
).
Die Property kann folgende Werte haben:
normal
: Die Reihenfolge der Elemente im DOM einhalten, was dem aktuellen Verhalten entspricht.flex-visual
: Wirkt sich nur auf Flex-Container aus. Die visuelle Lesereihenfolge der Flex-Elemente wird unter Berücksichtigung des Schreibmodus berücksichtigt.flex-flow
: Wirkt sich nur auf Flex-Container aus. Folgt der Flex-Flow-Richtung.grid-rows
: Wirkt sich nur auf Rastercontainer aus. Die visuelle Reihenfolge der Rasterelemente nach Zeile, wobei der Schreibmodus berücksichtigt wird.grid-columns
: Wirkt sich nur auf Rastercontainer aus. Die visuelle Reihenfolge der Rasterelemente nach Spalte, wobei der Schreibmodus berücksichtigt wird.grid-order
: Wirkt sich nur auf Rastercontainer aus. Die Propertyorder
wird berücksichtigt, ansonsten funktioniert sie wienormal
.
Wenn Sie beispielsweise drei Flex-Elemente in einem Container haben und deren flex-direction
auf row-reverse
setzen, werden sie vom Ende des Flex-Containers aus ausgerichtet und die Tabulatorreihenfolge verläuft von rechts nach links.
.flex {
display: flex;
flex-direction: row-reverse;
}
row-reverse
Wenn Sie flex-flow: visual
hinzufügen, folgt die Leserichtung der visuellen Reihenfolge in englischer Sprache, also von links nach rechts.
.flex {
display: flex;
flex-direction: row-reverse;
reading-flow: flex-visual;
}
reading-flow:flex-visual
.Verwenden Sie in Rasterlayouts reading-flow
, um sich die visuellen Zeilen oder Spalten anzusehen, anstatt der Quellreihenfolge zu folgen. Im folgenden Beispiel folgt der Lesefluss den Zeilen.
.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
.Jetzt ausprobieren
Diese CSS-Eigenschaft ist derzeit experimentell, kann aber zum Testen aktiviert werden. Wenn Sie die Funktion ausprobieren möchten, installieren Sie Chrome Dev oder Canary Version 128 oder höher und aktivieren Sie das Runtime-Flag CSSReadingFlow
.
Hier sind einige Beispiele, die alle in Canary funktionieren, wenn die Flag aktiviert ist.
Das Verhalten bei display: contents
-Anfragen ist noch nicht endgültig festgelegt und kann sich auf Grundlage des Feedbacks ändern, das du uns nach dem Lesen des folgenden Abschnitts dieses Beitrags gibst.
Elemente mit display: contents
und Webkomponenten
Die CSS-Arbeitsgruppe muss noch entscheiden, wie mit der Situation umgegangen werden soll, wenn eines der untergeordneten Elemente eines Elements mit Lesefluss display: contents
hat, und ebenso, wenn es sich um ein <slot>
handelt.
Im folgenden Beispiel haben die <div>
-Elemente display: contents
. Daher werden alle <button>
-Elemente für die Teilnahme am Flex-Layout freigegeben und reading-flow
berücksichtigt ihre Reihenfolge.
.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>
Haben Sie Beispiele aus der Praxis, die zu der in diesem Beispiel gezeigten Situation führen? Müssen Sie Elemente, die sich in einem Element mit display: contents
befinden, manchmal neu anordnen, weil sie nicht zueinander gehören, sondern zu dem Element mit display: contents
?
Außerdem wäre es hilfreich, wenn Sie uns Beispiele dafür nennen, in denen Sie die Property reading-flow
mit display: contents
verwenden möchten.display: contents
Wenn wir Ihre realen Anwendungsfälle kennen, können wir eine Lösung entwickeln, die Ihren Anforderungen entspricht.
Fügen Sie dem Problem der Preisvergleichsportal-Arbeitsgruppe Anwendungsfälle hinzu. Wenn Sie Beispiele auf Live-Websites haben oder eine Demo auf CodePen oder JSFiddle erstellen können, wäre das sehr hilfreich, wenn wir dieses Problem gemeinsam besprechen. Wenn Sie eine Vermutung haben, was passieren könnte, ist das auch hilfreich. Am wichtigsten sind jedoch die tatsächlichen Anwendungsfälle.