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

Rachel Andrew

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 richtig funktioniert. Im ersten Abschnitt dieses Beitrags wird das Problem beschrieben, das die Arbeitsgruppe lösen möchte. Seitdem hat sich viel getan und in diesem Beitrag gibt es 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

Die CSS Display Level 4-Spezifikation enthält jetzt 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: wird nur auf Flex-Container angewendet. 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 festlegen, 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

Füge flex-flow: visual hinzu. Der Lesefluss folgt der visuellen Reihenfolge auf Englisch, 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 zu Testzwecken aktiviert werden. Installieren Sie Chrome Dev oder Canary-Version 128 oder höher und aktivieren Sie das Laufzeit-Flag CSSReadingFlow, um dies auszuprobieren. Hier finden Sie einige Beispiele für den Einstieg, die alle in Canary funktionieren, wenn das 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 in das Flex-Layout aufgenommen 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 zu CodePen oder JavaScriptFiddle erstellen können, wäre dies unglaublich hilfreich, wenn wir dieses Problem in einer Gruppe besprechen könnten. Wenn Sie eine Vermutung haben, was passieren könnte, ist das auch hilfreich. Das Wichtigste ist jedoch, sich die realen Anwendungsfälle anzusehen.