Diereading-flowCSS Eigenschaft ermöglicht es, dieLesereihenfolge von Kindelementen einesBlock-,Flex- oderGrid-Layouts zu ändern. Dies beeinflusst die Reihenfolge, in der sie beim Vorlesen und in der sequentiellen Navigation, wie dem Tabben zu Links oder Schaltflächen, angesprochen werden.

Syntax

/* Keyword values */reading-flow: normal;reading-flow: flex-visual;reading-flow: flex-flow;reading-flow: grid-columns;reading-flow: grid-rows;reading-flow: grid-order;reading-flow: source-order;/* Global values */reading-flow: inherit;reading-flow: initial;reading-flow: revert;reading-flow: revert-layer;reading-flow: unset;

Wert

Diereading-flow-Eigenschaft nimmt eines der folgenden Schlüsselwörter als Wert:

normal

Der Standardwert. Die Lesereihenfolge folgt der Reihenfolge der Elemente im DOM.

flex-visual

Betrifft nurFlex-Container. Die Lesereihenfolge folgt der visuellen Reihenfolge derflex-Elemente, wobei derwriting-mode berücksichtigt wird. Ein Dokument in Englisch mitflex-direction: row-reverse und gesetztemreading-flow: flex-visual hätte daher eine Lesereihenfolge von links nach rechts.

flex-flow

Betrifft nur Flex-Container. Die Lesereihenfolge folgt derflex-flow-Richtung.

grid-columns

Betrifft nurGrid-Container. Die Lesereihenfolge folgt der visuellen Reihenfolge der Grid-Elemente, spaltenweise, wobei der Schreibmodus berücksichtigt wird.

grid-rows

Betrifft nur Grid-Container. Die Lesereihenfolge folgt der visuellen Reihenfolge der Grid-Elemente, zeilenweise, wobei der Schreibmodus berücksichtigt wird.

grid-order

Betrifft nur Grid-Container. Wenn dieorder-Eigenschaft auf eines der Kinder des Containers angewendet wird, folgt die Lesereihenfolge der modifizierten Elementreihenfolge. Wenn dieorder-Eigenschaft nicht auf die Grid-Elemente angewendet wird, verhält sichgrid-order wienormal.

source-order

Betrifft Grid-, Flex- und Block-Container. Hat keinen Effekt von sich aus — die Lesereihenfolge des Containers folgt weiterhin der Reihenfolge der Elemente im DOM — ermöglicht aber die Modifikation der Lesereihenfolge durch Setzen derreading-order-Eigenschaft auf die Kinder des Containers.

Beschreibung

Diereading-flow-Eigenschaft verändert dieLesereihenfolge von Elementen innerhalb einesBlock-,Flex- oderGrid-Containers, wenn sie auf einen anderen Wert alsnormal gesetzt wird. Solch ein Container wird alsLesefluss-Container bezeichnet.

Standardmäßig wird Web-Inhalt in der DOM-Quellenreihenfolge vorgelesen. Im Allgemeinen sollte die Quellenreihenfolge eine sinnvolle Lesereihenfolge für den Inhalt ausdrücken, und dies sollte auch in der visuellen Ordnung im Inhaltslayout widergespiegelt werden. Manchmal jedoch unterscheidet sich die visuelle Ordnung oder Tab-Reihenfolge von der Quellenreihenfolge. Zum Beispiel, wenn mehrere Flexbox- oder Grid-Layouts überMedia Queries auf ein Dokument angewendet werden, um unterschiedliche Geräte- oder Benutzeranforderungen zu erfüllen, kann sich die Inhaltsreihenfolge basierend auf der Ansichtsfensterbreite unterscheiden. In einem solchen Fall kannreading-flow verwendet werden, um sicherzustellen, dass die Lese- und Tab-Reihenfolge die visuelle Ordnung widerspiegelt.

In einigen Fällen möchten Sie möglicherweise die Lesereihenfolge innerhalb eines Lesefluss-Containers weiter verfeinern. Sie können diereading-order-Eigenschaftswerte auf die Kinder des Containers anwenden, um sie in ordinale Gruppen zu unterteilen, die dann in numerischer Reihenfolge vorgelesen werden.

Interaktion mittabindex

Wenn ein Satz von nicht standardmäßig fokussierbaren Elementen innerhalb eines Lesefluss-Containers mittabindex="0" fokussierbar gemacht wird, wird ihre Lesereihenfolge erwartungsgemäß durch diereading-flow- undreading-order-Eigenschaften geändert, genau wie bei interaktiven Elementen wie<a> oder<button>.

Jeder Versuch, die Tab-Reihenfolge des Inhalts eines Lesefluss-Containers mittels positivertabindex-Werte zu ändern, wird jedoch ignoriert — sie wird von den Effekten vonreading-flow undreading-order überschrieben. Solche Änderungen sollten ohnehin vermieden werden; sieheDon't Use Tabindex Greater than 0. Diereading-flow- undreading-order-Eigenschaften bieten eine viel bessere Möglichkeit, die Tab-Reihenfolge bei Bedarf zu ändern.

Formale Definition

Beispiele

Flex-Wertvergleich

In diesem Beispiel demonstrieren wir die Auswirkungen unterschiedlicherreading-flow-Werte auf einen Flex-Container mit umgekehrten Flex-Elementen.

HTML

Das Markup enthält ein<select>-Element zum Auswählen unterschiedlicherreading-flow-Werte und einen Wrapper-<div>, der drei<a>-Elemente enthält.

<form>  <label for="reading-flow">Choose reading flow:</label>  <select>    <option>normal</option>    <option>flex-visual</option>    <option>flex-flow</option>  </select></form><div>  <a href="#">Item 1</a>  <a href="#">Item 2</a>  <a href="#">Item 3</a></div>

CSS

Wir verwenden einendisplay-Wert vonflex, um das<div> in einen Flex-Container zu verwandeln, und zeigen die Flex-Elemente in einer Zeile in umgekehrter DOM-Reihenfolge mit einemflex-direction-Wert vonrow-reverse. Anfangs setzen wir einenreading-flow vonnormal, damit die Elemente in der DOM-Quellenreihenfolge gelesen oder durch Tabben angesprochen werden.

Wir setzen auch einenorder-Wert von1 auf das erste<a>-Element, damit es nach dem zweiten und dritten Element im Flexfluss angezeigt wird. Die resultierende visuelle Anordnung der Flex-Elemente von links nach rechts lautet "Element 1", "Element 3" und dann "Element 2", aber die DOM-Reihenfolge bleibt unverändert.

.wrapper {  display: flex;  flex-direction: row-reverse;  reading-flow: normal;  gap: 1em;}a:first-child {  order: 1;}

JavaScript

In unserem Skript greifen wir auf das<select>-Element und den Wrapper<div> zu und fügen einenchange-Ereignislistener zum<select>-Element hinzu. Wenn ein neuer Wert ausgewählt wird, wird dieser alsreading-flow-Eigenschaftswert auf den Wrapper gesetzt.

const selectElem = document.getElementById("reading-flow");const wrapperElem = document.querySelector(".wrapper");selectElem.addEventListener("change", () => {  wrapperElem.style.readingFlow = selectElem.value;});

Ergebnis

Die Demo rendert wie folgt:

Versuchen Sie zunächst, mitreading-flow: normal durch die Links zu tabben. Die Tab-Reihenfolge ist "Element 1", "Element 2" und dann "Element 3", da dies die Reihenfolge der Elemente im DOM ist.

Ändern Sie nun denreading-flow-Wert und tabben Sie erneut durch die Links:

• Ein Wert vonflex-visual bewirkt, dass die Elemente in der Reihenfolge "Element 1", "Element 3" und dann "Element 2" durchgetabbt werden, was der visuellen Anzeigeordnung entspricht, die sich aus den angewendeten Flexbox-Eigenschaften ergibt.
• Ein Wert vonflex-flow bewirkt, dass die Elemente in der Reihenfolge "Element 2", "Element 3" und dann "Element 1" durchgetabbt werden, was der Richtung desflex-flow entspricht — in diesem Fallrow-reverse. Hier ist die Tab-Reihenfolge das Gegenteil der Anzeigeordnung.

Grid-Wertvergleich

In diesem Beispiel demonstrieren wir die Auswirkungen unterschiedlicherreading-flow-Werte auf einen Grid-Container.

HTML

Das Markup enthält ein<select>-Element zum Auswählen unterschiedlicherreading-flow-Werte und einen Wrapper-<div>, der vier<a>-Elemente enthält.

<form>  <label for="reading-flow">Choose reading flow:</label>  <select>    <option>normal</option>    <option>grid-rows</option>    <option>grid-columns</option>    <option>grid-order</option>  </select></form><div>  <a href="#">Item A</a>  <a href="#">Item B</a>  <a href="#">Item C</a>  <a href="#">Item D</a></div>

CSS

Wir verwenden einendisplay-Wert vongrid, um das<div> in einen Grid-Container zu verwandeln, und zeigen die Grid-Elemente in drei Spalten mitgrid-template-columns an. Wir setzen auchgrid-template-areas, um unterschiedliche Platzierungsbereiche in diesen Spalten zu beschreiben, und platzieren die<a>-Elemente in diesen Bereichen mithilfe vongrid-area. Anfangs setzen wir einenreading-flow vonnormal, damit die Elemente in der Standard-DOM-Quellenreihenfolge gelesen oder durch Tabben angesprochen werden.

Schließlich setzen wir einenorder-Wert von1 auf das erste<a>-Element; dies hat keinen Einfluss auf das Layout, da es die Grid-Bereichsplatzierung nicht überschreibt, aber es hat einen Effekt, wenn ein bestimmterreading-flow-Wert gesetzt ist, wie Sie später sehen werden.

Von links nach rechts gelesen, lautet die resultierende Anzeigeordnung der Grid-Elemente "Element D", "Element B", "Element C" und dann "Element A".

.wrapper {  display: grid;  grid-template-columns: repeat(3, 150px);  grid-template-areas:    "d b b"    "c c a";  reading-flow: normal;}.a {  grid-area: a;}.b {  grid-area: b;}.c {  grid-area: c;}.d {  grid-area: d;}a:first-child {  order: 1;}

JavaScript

In unserem Skript greifen wir auf das<select>-Element und den Wrapper<div> zu und fügen einenchange-Ereignislistener zum<select>-Element hinzu. Wenn ein neuer Wert ausgewählt wird, wird dieser alsreading-flow-Eigenschaftswert auf den Wrapper gesetzt.

const selectElem = document.getElementById("reading-flow");const wrapperElem = document.querySelector(".wrapper");selectElem.addEventListener("change", () => {  wrapperElem.style.readingFlow = selectElem.value;});

Ergebnis

Die Demo rendert wie folgt:

Versuchen Sie zunächst, mitreading-flow: normal durch die Links zu tabben. Die Tab-Reihenfolge ist "Element A", "Element B", "Element C" und "Element D", da dies die Reihenfolge der Elemente im DOM ist.

Ändern Sie nun denreading-flow-Wert und dann versuchen Sie erneut, durch die Links zu tabben:

• Ein Wert vongrid-rows bewirkt, dass die Elemente in der visuellen Anzeigeordnung pro Zeile durchgetabbt werden. Das ist "Element D", "Element B", "Element C" und dann "Element A".
• Ein Wert vongrid-columns bewirkt, dass die Elemente in der visuellen Anzeigeordnung pro Spalte durchgetabbt werden. Das ist "Element D", "Element C", "Element B" und dann "Element A".
• Ein Wert vongrid-order bewirkt, dass die Elemente in DOM-Reihenfolge durchgetabbt werden, aber jeglicheorder-Wertänderungen berücksichtigt werden. Da wirorder: 1; auf das erste<a>-Element gesetzt haben, ist die Tab-Reihenfolge "Element B", "Element C", "Element D" und dann "Element A".

Anpassung der Lesereihenfolge auf Block-Containern

In diesem Beispiel demonstrieren wir die Auswirkungen des Wertesreading-flow: source-order auf einen Block-Container.

HTML

Das Markup enthält einen Wrapper-<div>, der vier<a>-Elemente enthält.

<div>  <a href="#">Item A</a>  <a href="#">Item B</a>  <a href="#">Item C</a>  <a href="#">Item D</a></div>

CSS

Wir setzen einenreading-flow vonsource-order, damit die Elemente in DOM-Quellenreihenfolge gelesen oder durch Tabben angesprochen werden, aber Änderungen an der Lesereihenfolge überreading-order zulässig sind. Wir setzen einenreading-order-Wert von1 auf das erste<a>-Element.

.wrapper {  reading-flow: source-order;}a:first-child {  reading-order: 1;}

Ergebnis

Die Demo rendert wie folgt:

Versuchen Sie, durch die Links zu tabben: Die Tab-Reihenfolge ist "Element B", "Element C", "Element D" und dann "Element A" — die Reihenfolge der Elemente im DOM wird befolgt, aber Element A wurde in eine höhere Lesereihenfolge-Gruppe als die anderen gesetzt (der Standardwert fürreading-order ist0), daher wird es zuletzt angegangen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• reading-order
• CSSreading-flow Beispiele via chrome.dev