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 Propertyorder
, agiert aber ansonsten wienormal
.
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;
}
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;
}
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; }
reading-flow: grid-rows
.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.