请求开发者就朗读流程和带有“display: content”的元素提供反馈意见

Rachel Andrew

去年，我们发布了这篇博文， 解决 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;
}

添加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> 元素都会提升以参与 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 会在我们讨论此问题时非常有用 。如果您对于将来会发生的事情有自己的想法， 也非常实用不过， 最重要的是了解实际应用场景