reading-flow

語法

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

值

reading-flow 屬性接受以下關鍵字之一作為其值。

normal

預設值。閱讀順序遵循 DOM 中元素的順序。

flex-visual

僅影響flex 容器。閱讀順序遵循 flex 項的視覺順序，同時會考慮 writing-mode。因此，對於一個英文文件，如果設定了 flex-direction: row-reverse 和 reading-flow: flex-visual，那麼閱讀順序將是從左到右。

flex-flow

僅影響 flex 容器。閱讀順序遵循 flex-flow 的方向。

grid-columns

僅影響網格容器。閱讀順序遵循網格項的視覺順序，逐列進行，同時會考慮書寫模式。

grid-rows

僅影響網格容器。閱讀順序遵循網格項的視覺順序，逐行進行，同時會考慮書寫模式。

grid-order

僅影響網格容器。如果 order 屬性被應用於容器的任何子元素，閱讀順序將遵循修改後的專案順序。如果 order 屬性未應用於網格項，則 grid-order 的行為與 normal 相同。

source-order

影響網格、flex 和塊級容器。其本身沒有效果——容器的閱讀順序仍然遵循 DOM 中元素的順序——但它允許透過在容器的子元素上設定 reading-order 屬性來修改閱讀順序。

描述

當 reading-flow 屬性的值不為 normal 時，它會修改塊級、flex 或grid 容器內元素的閱讀順序。這樣的容器被稱為閱讀流容器。

預設情況下，網頁內容是按照 DOM 源順序朗讀的。通常，源順序應該表達出內容合理的閱讀順序，並且這也應該反映在內容佈局的視覺順序上。然而，有時視覺順序或 Tab 鍵順序會與源順序不同。例如，當透過媒體查詢為文件應用多個 flexbox 或 grid 佈局以適應不同的裝置或使用者需求時，內容順序可能會根據視口寬度而有所不同。在這種情況下，可以使用 reading-flow 來確保閱讀和 Tab 鍵切換的順序能反映視覺順序。

在某些情況下，你可能希望進一步微調閱讀流容器內的閱讀順序。你可以在容器的子元素上使用 reading-order 屬性值，將它們放入序陣列中，然後按數字順序朗讀。

與 tabindex 的互動

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

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

正式定義

示例

Flex 值比較

在此示例中，我們演示了不同的 reading-flow 值對一個具有反向 flex 項的 flex 容器的影響。

HTML

標記包括一個用於選擇不同 reading-flow 值的 <select> 元素，以及一個包含三個 <a> 元素的包裝器 <div>。

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

CSS

我們使用 display 值為 flex 將 <div> 變為 flex 容器，並使用 flex-direction 值為 row-reverse 以反向 DOM 順序將 flex 項顯示為一行。最初，我們設定 reading-flow 為 normal，因此專案會按 DOM 源順序被朗讀或透過 Tab 鍵切換。

我們還為第一個 <a> 元素設定了 order 值為 1，使其在 flex 流中顯示在第二個和第三個專案之後。最終 flex 項從左到右的視覺順序是“Item 1”、“Item 3”，然後是“Item 2”，但 DOM 順序保持不變。

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

a:first-child {
  order: 1;
}

JavaScript

在我們的指令碼中，我們獲取了對 <select> 元素和包裝器 <div> 的引用，然後為 <select> 元素添加了一個 change 事件監聽器。當選擇一個新值時，它將被設定為包裝器的 reading-flow 屬性值。

const selectElem = document.getElementById("reading-flow");
const wrapperElem = document.querySelector(".wrapper");

selectElem.addEventListener("change", () => {
  wrapperElem.style.readingFlow = selectElem.value;
});

結果

該示例渲染效果如下：

首先，在 reading-flow: normal 的設定下，嘗試透過 Tab 鍵遍歷連結。Tab 鍵順序是“Item 1”、“Item 2”，然後是“Item 3”，因為這是元素在 DOM 中的順序。

現在嘗試更改 reading-flow 值，然後再次透過 Tab 鍵遍歷連結。

• 值為 flex-visual 時，專案將按“Item 1”、“Item 3”，然後是“Item 2”的順序透過 Tab 鍵切換，這是應用 flexbox 屬性後產生的視覺顯示順序。
• 值為 flex-flow 時，專案將按“Item 2”、“Item 3”，然後是“Item 1”的順序透過 Tab 鍵切換，這與 flex-flow 的方向相匹配——在本例中是 row-reverse。這裡，Tab 鍵順序與顯示順序相反。

Grid 值比較

在此示例中，我們演示了不同的 reading-flow 值對網格容器的影響。

HTML

標記包括一個用於選擇不同 reading-flow 值的 <select> 元素，以及一個包含四個 <a> 元素的包裝器 <div>。

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

CSS

我們使用 display 值為 grid 將 <div> 變為網格容器，並使用 grid-template-columns 將網格項顯示為三列。我們還設定了 grid-template-areas 來描述這些列中的不同放置區域，並使用 grid-area 將 <a> 元素放置在這些區域中。最初，我們設定 reading-flow 為 normal，因此專案會按預設的 DOM 源順序被朗讀或透過 Tab 鍵切換。

最後，我們為第一個 <a> 元素設定了 order 值為 1；這對佈局沒有影響，因為它不會覆蓋網格區域的放置，但當設定了某個 reading-flow 值時，它會產生效果，你稍後會看到。

從左到右閱讀，網格項最終的顯示順序是“Item D”、“Item B”、“Item C”，然後是“Item 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

在我們的指令碼中，我們獲取了對 <select> 元素和包裝器 <div> 的引用，然後為 <select> 元素添加了一個 change 事件監聽器。當選擇一個新值時，它將被設定為包裝器的 reading-flow 屬性值。

const selectElem = document.getElementById("reading-flow");
const wrapperElem = document.querySelector(".wrapper");

selectElem.addEventListener("change", () => {
  wrapperElem.style.readingFlow = selectElem.value;
});

結果

該示例渲染效果如下：

首先，在 reading-flow: normal 的設定下，嘗試透過 Tab 鍵遍歷連結。Tab 鍵順序是“Item A”、“Item B”、“Item C”和“Item D”，因為這是元素在 DOM 中的順序。

現在更改 reading-flow 值，然後再次嘗試透過 Tab 鍵遍歷連結。

• 值為 grid-rows 時，專案將按視覺顯示順序逐行透過 Tab 鍵切換。順序是“Item D”、“Item B”、“Item C”，然後是“Item A”。
• 值為 grid-columns 時，專案將按視覺顯示順序逐列透過 Tab 鍵切換。順序是“Item D”、“Item C”、“Item B”，然後是“Item A”。
• 值為 grid-order 時，專案將按 DOM 順序透過 Tab 鍵切換，但會考慮任何 order 值的更改。由於我們對第一個 <a> 元素設定了 order: 1;，因此 Tab 鍵順序是“Item B”、“Item C”、“Item D”，然後是“Item A”。

塊級容器上的閱讀順序調整

在此示例中，我們演示了 reading-flow: source-order 值對塊級容器的影響。

HTML

標記包括一個包裝器 <div>，其中包含四個 <a> 元素。

<div class="wrapper">
  <a class="a" href="#">Item A</a>
  <a class="b" href="#">Item B</a>
  <a class="c" href="#">Item C</a>
  <a class="d" href="#">Item D</a>
</div>

CSS

我們設定 reading-flow 為 source-order，因此專案會按 DOM 源順序被朗讀或透過 Tab 鍵切換，但允許透過 reading-order 修改閱讀順序。我們為第一個 <a> 元素設定了 reading-order 值為 1。

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

a:first-child {
  reading-order: 1;
}

結果

該示例渲染效果如下：

嘗試透過 Tab 鍵遍歷連結：Tab 鍵順序是“Item B”、“Item C”、“Item D”，然後是“Item A”——遵循了元素在 DOM 中的順序，但 Item A 被置於比其他項更高的閱讀順序序陣列中（預設的 reading-order 值為 0），因此它最後被切換到。

規範

瀏覽器相容性

另見

• reading-order
• CSS reading-flow 示例（來自 chrome.dev）