要求開發人員針對閱讀流程和含有顯示內容的元素提供意見：

Rachel Andrew

我們去年發布了「解決 CSS 版面配置和來源順序不一致的問題」這篇網誌文章。這項提案在 CSS 工作群組中經過詳細討論，目的是解決在彈性盒裝模型和格線中重新排序項目時，導致分頁體驗中斷的問題。該文章的開頭部分說明瞭工作組嘗試解決的問題。自那時起，情況已有所進展，這篇文章將簡要說明我們目前的進展。此外，我們也希望您針對特定領域提供意見回饋，那就是如何處理含有 display-contents 的項目？

提案更新

CSS 顯示層級 4 規格中現在有規格草案文字。這會導入名為 reading-flow 的新屬性。 這個屬性會新增至彈性或格線版面配置的容器元素 (具有 display: grid 或 display: flex 的元素)。

這項屬性接受下列值：

• normal：按照 DOM 中的元素順序，也就是目前的行為。
• flex-visual：僅對彈性容器生效。遵循 Flex 項目的視覺朗讀順序，並將書寫模式納入考量。
• flex-flow：僅對彈性容器生效。遵循彈性流程方向。
• grid-rows：只對格線容器生效。依據列的格線項目視覺順序，並考量書寫模式。
• grid-columns：只對格線容器生效。依據欄的格線項目視覺順序，並考量書寫模式。
• grid-order：只對格線容器生效。會將 order 屬性納入考量，但其他行為與 normal 類似。

舉例來說，如果容器中有三個 Flex 項目，並將 flex-direction 設為 row-reverse，這些項目會從 Flex 容器的結尾對齊，而 Tab 鍵順序會從右向左移動。

.flex {
  display: flex;
  flex-direction: row-reverse;
}

新增 flex-flow: visual，然後閱讀流程會遵循英文的視覺順序，因此是從左到右。

.flex {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}

在格狀版面配置中，使用 reading-flow 追蹤視覺化資料列或資料欄，而非來源順序。在下列範例中，朗讀流程會依據資料列。

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

立即試用

這項 CSS 屬性目前為實驗功能，但您可以啟用這項功能進行測試。如要試用這項功能，請安裝 Chrome 開發人員版或 Canary 版 128 以上版本， 並啟用執行階段旗標 CSSReadingFlow。 這裡提供幾個範例，協助你快速上手，這些範例都適用於已啟用旗標的 Canary 版本。

display: contents 案例的行為仍在開發中，可能會根據您在閱讀本文的下一節後提供的意見回饋而有所變更。

具有 display: contents 的元素和網頁元件

CSS 工作群組尚未決定如何處理以下情況：具有讀取流程的元素其中一個子項含有 display: contents，以及項目為 <slot> 的情況。

在以下範例中，<div> 元素具有 display: contents。因此，所有 <button> 元素都會升級，參與彈性版面配置，因此 reading-flow 會考量這些元素的順序。

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

我們想瞭解您是否有任何實際案例，導致出現這個範例中的情況。您是否需要重新排序元素內的項目，但這些項目並非同層級，因為這些項目是具有 display: contents 的項目的同層級項目。display: contents

此外，我們正在努力解決 display: contents 相關問題，因此請提供您想使用 reading-flow 屬性搭配 display: contents 的任何範例，這對我們很有幫助。瞭解您實際的用途，有助於我們設計出符合您需求的解決方案。

將使用案例新增至 CSS 工作群組問題。如果您有實際網站的範例，或能在 CodePen 或 JSFiddle 上建立示範，對我們以群組形式討論這個問題時會非常有幫助。如果你對預期結果有想法，也歡迎提供。不過，最重要的是瞭解實際應用情境。