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

Rachel Andrew

去年，我们发布了一篇博文，名为《解决 CSS 布局与源代码顺序之间的脱节问题》。这是一项正在 CSS 工作组中讨论的详细提案，旨在解决以下问题：在 Flexbox 和网格中重新排序项会导致标签页体验断开。该博文的开头部分概述了工作组试图解决的问题。自那时以来，情况发生了变化，本文将简要介绍我们目前的状况。我们还有一个特定方面需要您的反馈意见，即如何处理带有 display-contents 的商品？

提案更新

CSS 显示级别 4 规范中现在包含规范草稿文本。这引入了一个名为 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 容器的末尾开始排列，并且标签页顺序会从右向左移动。

.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 或更高版本，并启用运行时标志 CSSReadingFlow。 以下是一些示例，可帮助您快速入门，这些示例在启用相应标志的 Canary 中均可正常运行。

display: contents 案例的行为仍在开发中，可能会根据您在阅读本文的以下部分后提供的反馈而发生变化。

包含 display: contents 的元素和 Web 组件

CSS 工作组目前存在一个未解决的问题，即如何处理以下情况：具有阅读流的元素的某个子元素具有 display: contents，以及类似地，如果该项是 <slot>，又该如何处理。

在以下示例中，<div> 元素具有 display: contents。因此，所有 <button> 元素都会被提升为参与灵活布局，因此 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 上创建演示，那么在小组讨论此问题时，这些示例或演示将非常有用。如果您对预期会发生的情况有自己的想法，也请告诉我们。不过，最重要的是了解实际用例。