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

Rachel Andrew

去年，我们发布了一篇博文，名为解决 CSS 布局和来源顺序不一致的问题。其中详细介绍了 CSS 工作组正在讨论的一项提案，旨在解决在 flexbox 和网格中重新排列项会导致分屏体验中断的问题。该博文的开头部分概述了工作组尝试解决的问题。之后情况发生了一些变化，本博文简要说明了我们现在的状况。我们还需要您就一个特定方面提供反馈，即我们如何处理存在 display-contents 的商品？

提案更新

CSS 显示级别 4 规范中现在包含草稿规范文本。这将引入一个名为 reading-flow 的新属性。此属性会添加到 Flex 或网格布局的容器元素（具有 display: grid 或 display: flex 的元素）中。

该属性接受以下值：

  • normal：遵循 DOM 中的元素顺序，这是当前行为。
  • flex-visual：仅对 Flex 容器有效。遵循 Flex 项的视觉读取顺序，并考虑写入模式。
  • flex-flow：仅对 Flex 容器有效。遵循 flex-flow 方向。
  • grid-rows：仅对网格容器有效。遵循按行排列的网格项的视觉顺序，并考虑手写模式。
  • grid-columns：仅对网格容器有效。遵循按列排列的网格项的视觉顺序，并考虑手写模式。
  • grid-order：仅对网格容器有效。它考虑 order 属性，但在其他方面表现类似于 normal。

例如，如果容器中有三个 Flex 项，并且将其 flex-direction 设置为 row-reverse，则它们会从 Flex 容器的末尾对齐，并且标签页顺序会从右向左移动。

.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 和 Web 组件的元素

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 上创建演示，这将对我们全员讨论此问题非常有帮助。如果您对预期结果有想法，也请告诉我们。不过，最重要的是了解实际用例。