本頁面由 Cloud Translation API 翻譯而成。

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

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 {
  display: flex;
  flex-direction: row-reverse;
}

敬上

使用 row-reverse 的預設彈性項目流程。

新增 flex-flow: visual，閱讀流程會遵循以下視覺順序：所以從左到右。

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

敬上

透過 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; }

敬上

透過 reading-flow: grid-rows。

，瞭解如何調查及移除這項存取權。

立即試用

這項 CSS 屬性目前處於實驗階段，但你也可以啟用。如要試用這項功能，請安裝 Chrome 開發人員版或 Canary 128 以上版本並啟用 runtime 旗標為 CSSReadingFlow。我們提供了一些範例，協助您快速上手。這些物件在啟用旗標的 Canary 中都能運作

display: contents 個案例的行為仍在開發中，且可能會請根據您閱讀以下章節後提供的意見修改這篇文章。

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

有尚未解決的問題 CSS 工作團隊，決定該如何處理具有閱讀流程的元素子項含有 display: contents，而如果該項目是 <slot>，則同樣會得到類似結果。

在以下範例中，<div> 元素包含 display: contents。因為這項操作，所有 <button> 元素都會升級為採用 Flex 版面配置，因此 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 分組可以知道你預期會出現什麼情況這也相當有用不過，其中最重要的一點是查看實際用途

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

提案更新

立即試用

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

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