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

Rachel Andrew

Letztes Jahr haben wir den Blogbeitrag Solving the CSS layout and source order disconnect veröffentlicht. Darin wurde ein Vorschlag beschrieben, der in der CSS Working Group diskutiert wird und das Problem lösen soll, dass das Umordnen von Elementen in Flexbox und Grid zu einer unterbrochenen Tab-Navigation führt. Im ersten Abschnitt dieses Beitrags wird das Problem beschrieben, das die Arbeitsgruppe lösen möchte. Seitdem hat sich einiges getan. In diesem Beitrag finden Sie eine kurze Zusammenfassung des aktuellen Stands. Wir haben auch einen bestimmten Bereich, in dem wir Ihr Feedback benötigen: Wie gehen wir mit Artikeln um, die display-contents enthalten?

Änderungen am Vorschlag

In der CSS Display Level 4-Spezifikation ist jetzt Entwurfsspezifikationstext enthalten. Dadurch wird eine neue Eigenschaft namens reading-flow eingeführt. Diese Eigenschaft wird dem enthaltenden Element für das Flex- oder Grid-Layout hinzugefügt (dem Element mit display: grid oder display: flex).

Die Property kann die folgenden Werte haben:

  • normal: Die Reihenfolge der Elemente im DOM wird beibehalten. Das ist das aktuelle Verhalten.
  • flex-visual: Wirkt sich nur auf flexible Container aus. Folgt der visuellen Leserichtung von Flex-Elementen und berücksichtigt den Schreibmodus.
  • flex-flow: Wirkt sich nur auf flexible Container aus. Folgt der Richtung von „flex-flow“.
  • grid-rows: Wirkt sich nur auf Grid-Container aus. Folgt der visuellen Reihenfolge der Rasterelemente nach Zeile und berücksichtigt den Schreibmodus.
  • grid-columns: Wirkt sich nur auf Grid-Container aus. Folgt der visuellen Reihenfolge der Rasterelemente nach Spalte, wobei der Schreibmodus berücksichtigt wird.
  • grid-order: Wirkt sich nur auf Grid-Container aus. Berücksichtigt das Attribut order, verhält sich ansonsten aber wie normal.

Wenn Sie beispielsweise drei Flex-Elemente in einem Container haben und deren flex-direction auf row-reverse setzen, werden sie am Ende des Flex-Containers ausgerichtet und die Tab-Reihenfolge wird von rechts nach links verschoben.

.flex {
  display: flex;
  flex-direction: row-reverse;
}
Standardablauf von flexiblen Elementen mit row-reverse.

Fügen Sie flex-flow: visual hinzu. Der Lesefluss folgt dann der visuellen Reihenfolge im Englischen, 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 den visuellen Zeilen oder Spalten und nicht 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 wird derzeit noch getestet. Sie kann jedoch für Tests aktiviert werden. Wenn Sie die Funktion ausprobieren möchten, installieren Sie Chrome Dev oder Canary Version 128 oder höher und aktivieren Sie das Laufzeit-Flag CSSReadingFlow. Hier finden Sie einige Beispiele für den Einstieg, die alle in Canary mit aktiviertem Flag funktionieren.

Das Verhalten für display: contents-Fälle ist noch in der Entwicklung und kann sich basierend auf dem Feedback ändern, das Sie nach dem Lesen des folgenden Abschnitts dieses Beitrags geben.

Elemente mit display: contents und Webkomponenten

Es gibt ein offenes Problem für die CSS Working Group, bei dem entschieden werden muss, wie mit der Situation umgegangen werden soll, in der eines der untergeordneten Elemente eines Elements mit „reading-flow“ display: contents hat, und ähnlich, wenn das Element ein <slot> wäre.

Im folgenden Beispiel haben die <div>-Elemente display: contents. Aus diesem Grund werden alle <button>-Elemente so angepasst, dass sie am flexiblen Layout teilnehmen können. reading-flow berücksichtigt daher 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>

Wir würden gern wissen, ob Sie Beispiele aus der Praxis haben, die die in diesem Beispiel gezeigte Situation verursachen. Müssen Sie jemals Elemente neu anordnen, die sich in einem Element mit display: contents befinden, mit Elementen, die keine Geschwister sind, weil sie Geschwister des Elements mit display: contents sind?

Außerdem wäre es hilfreich, wenn Sie uns Beispiele dafür geben könnten, in denen Sie die reading-flow-Property mit display: contents verwenden möchten, damit wir die Probleme mit display: contents beheben können. Wenn wir Ihre realen Anwendungsfälle kennen, können wir eine Lösung entwickeln, die Ihren Anforderungen entspricht.

Fügen Sie der Problembeschreibung der CSS-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 als Gruppe besprechen. Es ist auch hilfreich, wenn Sie uns mitteilen, was Sie erwarten. Am wichtigsten ist es jedoch, die tatsächlichen Anwendungsfälle zu sehen.