Anfrage für Entwickler: Feedback zum Lesefluss und zu Elementen mit „display: content“

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 Property order wird berücksichtigt, ansonsten funktioniert sie wie normal.

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;
}
Standardablauf von Flex-Elementen mit 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;
}
Mit 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; }
Mit 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.