reading-order

語法

/* <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;

值

<integer>

表示元素所屬的順序組。

描述

當元素的塊、flex 或 grid 父容器的 reading-flow 屬性設定為 normal 以外的值時，可以使用 reading-order 屬性來設定元素的閱讀流位置，使其相對於其兄弟元素。

對於閱讀和導航，塊、flex 或 grid 容器內的元素按 reading-order 值升序排序。如果多個兄弟元素具有相同的 reading-order 值，則這些項根據容器的 reading-flow 進行排序。未明確指定 reading-order 值的兄弟元素被分配預設值 0，這使得閱讀流容器的所有子元素預設處於同一順序組。

兄弟元素按從最小編號的順序組到最大編號的順序組進行排序。因此，要使元素在其兄弟元素之後被讀出，可以將其 reading-order 值設定為 1 或更大。要使元素在其兄弟元素之前被讀出，可以將其 reading-order 值設定為 -1 或更小。

reading-order 定義了閱讀和 Tab 鍵順序，但對視覺順序沒有影響。

與 tabindex 的互動

如果一組通常不可聚焦的閱讀流容器子元素透過 tabindex="0" 屬性變得可聚焦，它們的閱讀順序將按 reading-flow 和 reading-order 屬性的預期方式進行修改，就像 <a> 或 <button> 等互動元素一樣。

但是，任何嘗試使用正 tabindex 值修改閱讀流容器內容的 Tab 鍵順序的嘗試都將被忽略——被 reading-flow 和 reading-order 的效果覆蓋。無論如何，你通常不應該使用這些；請參閱不要使用大於 0 的 Tabindex。如果需要，reading-flow 和 reading-order 屬性提供了更好的修改 Tab 鍵順序的方法。

正式定義

示例

網格行順序

此示例演示瞭如何使用 reading-order 來控制網格容器閱讀順序中單個網格項的位置。一個網格項的 reading-order 值低於預設的 0，因此將在其兄弟元素之前被讀出。另一個網格項的 reading-order 值設定得更高，因此將在其他元素之後被讀出，無論源順序或顯示順序如何。

HTML

在我們的標記中，有六個包含在包裝器 <div> 中的 <a> 元素。

<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

在 <div> 上，我們將 grid-auto-flow 屬性設定為 dense，因此專案可能會以非源順序顯示。類為 top 的 <a> 元素的 reading-order 屬性設定為 -1，因此“專案 4”將是閱讀流中的第一個專案。類為 bottom 的 <a> 元素的 reading-order 屬性設定為 21，因此“專案 4”將是閱讀順序中的最後一個專案。其餘專案將在此之間以網格行順序訪問，因為 <div> 元素的 reading-flow 屬性設定為 grid-rows。

.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;
}

結果

上面的演示渲染如下：

嘗試使用 Tab 鍵瀏覽連結。請注意，“專案 4”是如何首先被 Tab 鍵訪問，而“專案 2”是最後被 Tab 鍵訪問的，這是因為它們的 reading-order 值被修改了。在這兩者之間，專案按網格行順序被 Tab 鍵訪問。

源順序覆蓋

在此示例中，奇數項的 reading-order 值設定得較低，因此它們將在組中的其他項之前被讀出，無論源順序或顯示順序如何。

HTML

在我們的標記中，有五個包含在包裝器 <div> 中的 <a> 元素。

<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

<div> 元素的 reading-flow 屬性設定為 source-order，這允許使用 reading-order 覆蓋預設的源閱讀順序。奇數 <a> 元素的 reading-order 值為 -1，因此它們在偶數項之前被讀出。

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

.wrapper > a {
  display: block;
}

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

結果

上面的演示渲染如下：

嘗試使用 Tab 鍵瀏覽連結，並注意“專案 1”、“專案 3”和“專案 5”是如何首先被 Tab 鍵訪問的，這是因為它們的 reading-order 被修改了。之後，專案按源順序被 Tab 鍵訪問。

規範

瀏覽器相容性

另見

• reading-flow
• CSS reading-flow 示例（透過 chrome.dev）