去年,我们发布了这篇博文,
解决 CSS 布局和源代码顺序断开连接的问题。
其中详细说明了
CSS 工作组,旨在解决
Flexbox 和 grid 中的项会导致标签页切换体验不连贯。通过
该帖子的开头部分概述了工作组
问题。此后,情况发生了一些变化,本帖子将简要介绍
我们现在所处的环境我们还在特定区域需要您
反馈 - 我们如何处理包含 display-contents
的项?
提案的更新
现在
草稿规范文本
。
这将引入一个名为 reading-flow
的新属性。
此属性会添加到 flex 或网格布局的包含元素中
(具有 display: grid
或 display: flex
的元素)。
该属性接受以下值:
normal
:遵循 DOM(当前对象)中元素的顺序 行为flex-visual
:仅对柔性容器生效。遵循 Flex 项的视觉读取顺序,将写入模式考虑在内。flex-flow
:仅对柔性容器生效。遵循 flex-flow 。grid-rows
:仅对网格容器生效。遵循视觉元素 网格项按行的顺序排列,将书写模式考虑在内。grid-columns
:仅对网格容器生效。遵循直观顺序 将网格项按列排列,同时将书写模式考虑在内。grid-order
:仅对网格容器生效。考虑到order
属性, 但在其他方面表现类似于normal
。
例如,如果一个容器中有三个 flex 项,
并将其 flex-direction
设置为
row-reverse
:从 Flex 容器末尾与 Tab 键顺序对齐
从右向左移动。
.flex {
display: flex;
flex-direction: row-reverse;
}
row-reverse
的 Flex 项目的默认流。添加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 或更高版本
并启用
运行时标志 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
将对您有所帮助。
包含 display: contents
的 reading-flow
属性。了解现实世界
您将帮助我们设计出满足您需求的解决方案。
将用例添加到 CSS 工作组问题。 如果您在实际网站上有示例,或者可以使用 CodePen 创建演示,或者 JSFiddle 会在我们讨论此问题时非常有用 。如果您对于将来会发生的事情有自己的想法, 也非常实用不过, 最重要的是了解实际应用场景