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

Rachel Andrew

我們去年曾發布一篇網誌文章「解決 CSS 版面配置和來源順序不連結的問題」。這份文件詳細說明 CSS 工作小組正在討論的提案，旨在解決在彈性容器和格線中重新排序項目時，導致分頁體驗中斷的問題。該貼文的開頭部分概述了工作團隊正在嘗試解決的問題。自那時起，情況已有所改變，這篇文章將簡要說明目前的情況。我們也需要你在特定領域提供意見回饋：我們如何處理含有 display-contents 的商品？

提案更新

CSS 顯示層級 4 規格現在包含草稿規格文字。這會引入名為 reading-flow 的新屬性。這個屬性會新增至彈性或格狀版面配置的容納元素 (含有 display: grid 或 display: flex 的元素)。

這個屬性接受下列值：

• normal：依照 DOM 中的元素順序，這是目前的行為。
• flex-visual：僅對彈性容器生效。按照彈性項目的視覺閱讀順序，將書寫模式納入考量。
• flex-flow：僅對彈性容器生效。遵循彈性流程方向。
• grid-rows：只對格狀容器生效。按照資料列的視覺順序排列格線項目，並考量書寫模式。
• grid-columns：僅對格狀容器生效。依照格狀項目的視覺順序，並考量書寫模式。
• grid-order：僅對格狀容器生效。會考量 order 屬性，但會像 normal 一樣運作。

舉例來說，如果容器中有三個 Flex 項目，並將其 flex-direction 設為 row-reverse，這些項目會從 Flex 容器的結尾排列，且分頁順序會從右至左移動。

.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。我們提供了一些入門範例，可在初期測試版本及啟用旗標的情況下運作。

display: contents 案例的行為仍在進行中，可能會根據您在閱讀本篇文章下列部分後提供的意見回饋進行調整。

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

有一個未解決的問題，CSS 工作小組需要決定如何處理以下情況：當具有閱讀流程的元素其中一個子項具有 display: contents，以及當項目為 <slot> 時，該如何處理。

在以下範例中，<div> 元素包含 display: contents。因此，所有 <button> 元素都會提升為參與 Flexbox 版面配置，因此 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 相關問題，因此請提供任何您可能想搭配 display: contents 使用 reading-flow 屬性的範例，以利我們解決問題。瞭解您實際的使用情境，有助我們設計符合您需求的解決方案。

在 CSS 工作小組問題中新增用途。如果您有實際網站上的範例，或在 CodePen 或 JSFiddle 上製作示範影片，這些示範用在小組討論這個問題時非常實用。如果你能想到預期會發生的情況 這項功能也會很有幫助不過，最重要的是實際使用情境。