reading-order

Syntax

/* <integer> values */
reading-order: 1;
reading-order: -1;

/* Global values */
reading-order: inherit;
reading-order: initial;
reading-order: revert;
reading-order: revert-layer;
reading-order: unset;

Wert

<integer>

Repräsentiert die Ordnungsgruppe, zu der das Element gehört.

Beschreibung

Wenn ein Element's Block-, Flex- oder Grid-Elterncontainer eine reading-flow Eigenschaft hat, die auf einen anderen Wert als normal gesetzt ist, kann die reading-order Eigenschaft verwendet werden, um die Position des Elements im Lesefluss relativ zu der seiner Geschwister festzulegen.

Für das Lesen und die Navigation werden Elemente innerhalb eines Block-, Flex- oder Grid-Containers nach aufsteigendem reading-order-Wert sortiert. Wenn mehrere Geschwister denselben reading-order-Wert haben, werden diese Elemente gemäß des reading-flow des Containers sortiert. Geschwister, denen kein expliziter reading-order-Wert zugewiesen wurde, erhalten den Standardwert 0, was alle Kinder eines Leseflusscontainers von vornherein in derselben Ordnungsgruppe platziert.

Geschwisterelemente werden beginnend mit der niedrigsten Ordnungsgruppe bis zur höchsten geordnet. Um ein Element nach seinen Geschwistern lesen zu lassen, könnte man ihm einen reading-order-Wert von 1 oder mehr zuweisen. Um ein Element vor seinen Geschwistern lesen zu lassen, könnte man ihm einen reading-order-Wert von -1 oder weniger zuweisen.

Der reading-order definiert die Lese- und Tab-Reihenfolge, hat jedoch keinen Einfluss auf die visuelle Reihenfolge.

Interaktion mit tabindex

Wenn eine Gruppe von Leseflusscontainer-Kindelementen, die normalerweise nicht fokussierbar sind, mit tabindex="0" fokussierbar gemacht wird, wird ihre Leserichtung wie erwartet durch die Eigenschaften reading-flow und reading-order geändert, genauso wie bei interaktiven Elementen wie <a> oder <button>.

Jedoch wird jeder Versuch, die Tab-Reihenfolge des Inhalts eines Leseflusscontainers mit positiven tabindex-Werten zu ändern, ignoriert — überschrieben durch die Effekte von reading-flow und reading-order. Sie sollten diese im Allgemeinen ohnehin nicht verwenden; siehe Don't Use Tabindex Greater than 0. Die Eigenschaften reading-flow und reading-order bieten eine weitaus bessere Möglichkeit, die Tab-Reihenfolge bei Bedarf zu ändern.

Formale Definition

Beispiele

Grid-Reihenfolge

Dieses Beispiel demonstriert die Verwendung von reading-order, um die Positionen einzelner Gitterelemente innerhalb der Lesereihenfolge eines Gittercontainers zu steuern. Ein Gitterelement hat einen reading-order-Wert, der niedriger ist als der Standardwert 0, daher wird es vor seinen Geschwistern gelesen. Ein anderes hat einen höheren reading-order-Wert festgelegt, somit wird es nach den anderen gelesen, unabhängig von Quell- oder Anzeigereihenfolge.

HTML

In unserem Markup befinden sich sechs <a> Elemente in einem umschließenden <div>.

<div class="wrapper">
  <a href="#">Item 1</a>
  <a class="bottom" href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a class="top" href="#">Item 4</a>
  <a href="#">Item 5</a>
  <a href="#">Item 6</a>
</div>

CSS

Auf dem <div> setzen wir die grid-auto-flow Eigenschaft auf dense, daher können Elemente außerhalb der Quellreihenfolge angezeigt werden. Die reading-order Eigenschaft auf dem <a>-Element mit der Klasse top ist auf -1 gesetzt, daher wird "Item 4" das erste Element im Lesefluss sein. Die reading-order Eigenschaft auf dem <a>-Element mit der Klasse bottom ist auf 21 gesetzt, daher wird "Item 4" das letzte Element in der Lesereihenfolge sein. Die restlichen Elemente werden dazwischen, in der Gitter-Reihenfolge besucht, da die reading-flow Eigenschaft des <div>-Elements auf grid-rows gesetzt ist.

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-auto-flow: dense;
  reading-flow: grid-rows;
}

.top {
  reading-order: -1;
}

.bottom {
  reading-order: 21;
}

Ergebnis

Die obige Demo rendert sich wie folgt:

Versuchen Sie, durch die Links zu tabben. Beachten Sie, dass "Item 4" zuerst getabt wird und "Item 2" zuletzt, aufgrund ihrer geänderten reading-order-Werte. Dazwischen werden die Elemente in der Gitter-Reihenfolge getabt.

Quellreihenfolge-Override

In diesem Beispiel haben die ungeraden Elemente einen niedrigeren reading-order-Wert festgelegt, daher werden sie innerhalb einer Gruppe vor den anderen gelesen, unabhängig von Quell- oder Anzeigereihenfolge.

HTML

In unserem Markup haben wir fünf <a> Elemente in einem umschließenden <div>.

<div class="wrapper">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
  <a href="#">Item 5</a>
</div>

CSS

Die reading-flow Eigenschaft des <div>-Elements ist auf source-order gesetzt, was ermöglicht, dass reading-order verwendet wird, um die standardmäßige Quellenreihenfolge zu überschreiben. Die ungeraden <a> Elemente haben einen reading-order-Wert von -1, daher werden sie vor den geraden Elementen gelesen.

.wrapper {
  reading-flow: source-order;
}

.wrapper > a {
  display: block;
}

.wrapper a:nth-child(odd) {
  reading-order: -1;
}

Ergebnis

Die obige Demo rendert sich wie folgt:

Versuchen Sie, durch die Links zu tabben, und beachten Sie, wie "Item 1", "Item 3" und "Item 5" zuerst getabt werden, wegen ihrer geänderten reading-order. Danach werden die Elemente in der Quellreihenfolge getabt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• reading-flow
• CSS reading-flow Beispiele via chrome.dev