我們去年發布了網誌文章
解決 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 分組可以知道你預期會出現什麼情況 這也相當有用不過, 其中最重要的一點是查看實際用途