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

Rachel Andrew

Letztes Jahr haben wir den Blogpost Lösen Sie das CSS-Layout und trennen Sie die Quellenreihenfolge. In diesem Dokument wurde ein Vorschlag der Preisvergleichsportal-Arbeitsgruppe an, um das Problem zu lösen, bei dem die Neuanordnung Elemente in Flexbox und Raster führen zu einer nicht verbundenen Tab-Nutzung. Die im ersten Abschnitt dieses Beitrags auf das Problem eingeht, zu lösen versuchen. Seitdem hat sich viel getan. In diesem Beitrag möchte ich Ihnen kurz wo wir jetzt sind. Wir haben auch einen bestimmten Bereich, in dem wir Ihre Feedback - wie gehen wir mit Elementen um, die display-contents haben?

Aktualisierung des Angebots

Es gibt jetzt Entwurf der Spezifikation in der CSS-Spezifikation für Display-Ebene 4. Dadurch wird ein neues Attribut namens reading-flow eingeführt. Diese Eigenschaft wird dem Element, in dem sie enthalten ist, für das flexible oder Rasterlayout hinzugefügt. (das Element mit display: grid oder display: flex).

Für die Eigenschaft sind folgende Werte zulässig:

• normal: Folgen Sie der Reihenfolge der Elemente im DOM. Dies ist die aktuelle verhalten.
• flex-visual: wird nur auf Flex-Container angewendet. Folgt dem visuelle Lesereihenfolge von flexiblen Elementen unter Berücksichtigung des Schreibmodus.
• flex-flow: wird nur auf Flex-Container angewendet. Folgt dem flexiblen Ablauf Richtung.
• grid-rows: wird nur auf Rastercontainer angewendet. Folgt dem visuellen Reihenfolge der Rasterelemente nach Zeilen sortieren, wobei der Schreibmodus berücksichtigt wird.
• grid-columns: wird nur auf Rastercontainer angewendet. Folgt der visuellen Reihenfolge von Rasterelementen nach Spalte sortiert und berücksichtigt dabei den Schreibmodus.
• grid-order: wird nur auf Rastercontainer angewendet. Berücksichtigt die Property order, agiert aber ansonsten wie normal.

Beispiel: Wenn sich in einem Container drei flexible Elemente befinden, und setzen ihr flex-direction auf row-reverse, sie richten sich nach dem Ende des flexiblen Containers und der TAB-Reihenfolge sich von rechts nach links bewegt.

.flex {
  display: flex;
  flex-direction: row-reverse;
}

Füge flex-flow: visual hinzu, dann folgt der Lesefluss der visuellen Reihenfolge in also von links nach rechts.

.flex {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}

Verwenden Sie in Rasterlayouts reading-flow, um den visuellen Zeilen oder Spalten zu folgen, anstatt als die Quellenreihenfolge. Im folgenden Beispiel folgt der Lesefluss dem 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; }

Jetzt ausprobieren

Diese CSS-Property befindet sich derzeit in der Testphase. Sie kann jedoch aktiviert werden. für Tests. Installiere Chrome Dev oder Canary-Version 128 oder höher, um die neue Version auszuprobieren. und aktivieren Sie die Laufzeit-Flag CSSReadingFlow. Hier finden Sie einige Beispiele für den Einstieg. die alle in Canary funktionieren, wenn das Flag aktiviert ist.

Das Verhalten für display: contents Fälle ist noch in der Entwicklung und wird möglicherweise basierend auf dem Feedback, das Sie nach dem Lesen des folgenden Abschnitts der Seite diesem Beitrag.

Elemente mit display: contents und Webkomponenten

Es gibt ein ausstehendes Problem für die Preisvergleichsportal-Arbeitsgruppe, um zu entscheiden, wie mit der Situation umgegangen wird, in der eines der den untergeordneten Elementen eines Elements mit Lesefluss hat display: contents und ähnlich, wenn es sich um ein <slot>-Element handelt.

Im folgenden Beispiel haben die <div>-Elemente den display: contents-Wert. Aufgrund von Dabei werden alle <button>-Elemente für die Teilnahme am Flex hochgestuft. Layout. Daher berücksichtigt reading-flow die entsprechende 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 gerne erfahren, ob Sie Beispiele aus der Praxis haben, die zu dieser Situation führen können: in diesem Beispiel zu sehen. Müssen Sie jemals Artikel neu anordnen, die sich in einem -Element, das display: contents mit Elementen enthält, die aufgrund von ist gleichgeordnete Elemente des Elements, für das display: contents festgelegt wurde.

Wir arbeiten daran, die Probleme rund um display: contents zu beheben. wäre es hilfreich, wenn Sie uns Beispiele zeigen, in denen Sie reading-flow-Property mit display: contents. Die reale Welt verstehen Ihre Anwendungsfälle helfen uns dabei, eine Lösung zu entwickeln, die Ihren Anforderungen entspricht.

Fügen Sie Anwendungsfälle zur Problem mit der Preisvergleichsportal-Arbeitsgruppe: Wenn Sie Beispiele auf Live-Websites haben oder eine Demo mit CodePen erstellen oder JSFiddle zu erstellen, das uns bei der Diskussion dieses Problems als Gruppe. Wenn Sie wissen, was Sie erwarten würden, ist das auch hilfreich. Die ist es am wichtigsten, sich die realen Anwendungsfälle anzusehen.