解决 CSS 布局与源代码顺序断开连接的问题

我们希望您就一个建议的解决方案提供反馈，解决布局方法如何以与文档来源断开连接的顺序排列项目的问题。

Rachel Andrew

CSS 工作组正在研究一种解决方案，以解决布局方法可以按照脱离来源、因此而独立于文档的读取和焦点顺序的排列顺序来排列项。本文介绍了具体问题和建议的解决方案，我们期待收到您的反馈。

问题

HTML 文档的阅读顺序遵循源代码顺序。这意味着，屏幕阅读器会按照源代码中的排版方式读取文档，使用键盘在文档中跳转的用户也会遵循该源代码顺序。这通常是合理的，而且文档合理的来源顺序对于以阅读模式呈现内容、屏幕阅读器和任何 CSS 有限的设备至关重要。但是，CSS 以及 Flexbox 和 grid 可以创建布局，其中布局定义了与底层来源不同的视觉阅读顺序。

例如，对 Flex 项使用 order 属性会更改布局顺序，但不会更改源代码中的顺序。

使用网格布局时，所选布局方法可能会混乱标签页顺序，例如，使用 grid-auto-flow: dense 时，系统会创建随机的项布局顺序。

开发者还可能会导致这种断开连接，方法是将网格上的项放置在与来源中规定的顺序不同的顺序。

建议的解决方案

CSS 工作组正在提出一项解决方案，非常期待开发者和无障碍社区就此方法提供反馈。

使用 reading-order: auto 遵循随机布局

在创建随机布局顺序的情况下（例如在网格布局中使用紧密排列时），您可能希望浏览器遵循布局，而不是来源顺序。要实现这种效果，Flex 或网格项需要具有 reading-order 属性，且值为 auto。

以下 CSS 会导致阅读顺序遵循因 grid-auto-flow: dense 而紧密排列的项的放置。

.cards {
  display: grid;
  grid-auto-flow: dense;
}

.cards li {
  grid-column: auto / span 2;
  reading-order: auto;
}

遵循非随机布局并采用 reading-order-items

在某些网格布局和 Flex 布局中，布局顺序很容易理解。例如，在使用 order 属性重新排列项的 Flex 布局中，order 属性会决定明显的布局顺序。在其他布局中，理想的布局顺序不太明确，可能有多个可能的选择。因此，如果采用非随机布局，您需要向容器添加 grid-order-items 属性，并使用关键字值说明布局顺序的意图。

以下示例展示了使用 row-reverse 的 Flex 布局。Flex 项具有 reading-order: auto，Flex 容器具有 reading-order-items: flex flow，这表示我们还希望阅读顺序也遵循 flex-flow 方向，而不是遵循视觉顺序（我们可以使用 flex visual 指明）。

.cards {
  display: flex;
  flex-flow: row-reverse;
  reading-order-items: flex flow;
}

.cards li {
  reading-order: auto;
}

在下一个示例中，系统会使用 grid-template-areas 创建网格布局，并且各项项的布局顺序与源顺序不同。reading-order-items 属性用于指明我们应遵循布局顺序，先遍历每一行，然后再前进到下一行。（grid column 表示相反方向）。

.wrapper {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    "a a b b b b"
    "c c d d e e"
    "f f g g h h";
  reading-order-items: grid rows;
}

.a {
  grid-area: a;
  reading-order: auto;
}

这是否意味着来源顺序无关紧要？

不可以，来源顺序仍然很重要。此功能应仅在阅读顺序可能与来源有所不同的特定情况下使用。例如，使用可能会导致这种断开连接的布局方法（例如密集网格填充），或者在某个断点处使用不同的布局顺序。

使用这些属性时，请按照在没有 CSS 的情况下呈现网页时有意义的顺序创建源文档。请仅在需要这些属性的位置和断点处添加这些属性。

制作工具是否应应用这些属性？

允许用户通过拖放元素来创建网格布局的制作工具，仍应鼓励用户创建合理的源文档。因此，在大多数情况下，最好根据布局顺序重新排列来源，而不是使用这些属性以一种懒惰的方式处理断开连接。

请分享您对此提案的反馈

我们非常希望收集有关此问题的反馈。特别是，如果您认为这样无法解决应用场景，或者对该方法存在无障碍功能顾虑，请告知 CSS 工作组。

有一个正在进行的会话，其中包含许多有关该方法的用例和想法。您可以在该会话中添加任何评论，并指出此提案可能存在的问题。请注意，当前方案与我发起线程的初始方案大不相同。感兴趣的用户可能会喜欢阅读促成我们今天取得的成就的所有对话，因为这是一个很好的例子，说明了 CSS 工作组如何处理提案，使其成为可在浏览器中实现的内容。

缩略图：Patrick Tomasso。感谢 Chris Harrelson、Tab Atkins 和 Ian Kilpatrick 提供反馈和评价。