CSS reading-flow和reading-order属性简介

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11889
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

继续介绍前端前沿新特性，这次介绍的是两个改进键盘无障碍访问的CSS属性reading-flow和reading-order。

一、Tabindex属性的问题

在Web开发中，DOM文档的属性和视觉表现顺序不一致是很正常的。

但是，此时，如果我们不进行干预，用户在使用Tab键进行索引访问的时候，顺序就会出现问题，导致困惑。

在过去，我们会使用tabindex属性进行交互处理。举个例子：

<div class="box" aria-owns="第一 第三 第二">
  <a href="#" tabindex="1" id="one">第一</a>
  <a href="#" tabindex="3" id="two">第二</a>
  <a href="#" tabindex="2" id="three">第三</a>
</div>

tabindex值为3的地2项就会被最后一个获取。

关于tabindex属性的具体规则，可以参见我之前的文章“HTML tabindex属性与web网页键盘无障碍访问”，或者购买《HTML并不简单》这本书，其中有详细介绍。

在比较简单的页面，我们使用tabindex属性是没问题的，但是页面比较复杂，有非常多的地方有类似的结构，那就会出现tabindex设置冲突的问题，因为tabindex的索引控制是全局的。

对于，对于这种局部布局的tabindex属性调整，需要有更加友好的特性，在这种背景下，reading-flow和reading-order属性应运而生。

二、重点关注reading-flow属性

在大多数场景下，我们都是使用reading-flow属性，且需要与Flex布局和Grid布局配合使用。

我们先看使用案例，HTML和CSS代码如下所示：

<div class="box">
 <a href="##">张</a>
 <a href="##">鑫</a>
 <a href="##">旭</a>
</div>

.box {
  display: flex;
  :nth-child(1) {
    order: 2;
  }
}

实时效果如下所示，您可以尝试使用 TAB 键查找下一个可聚焦元素，使用 TAB+SHIFT 键查找上一个可聚焦元素，观察焦点聚焦的顺序。

友情提示，可以先点击框框的空白处，再按下Tab键，下同。

结果会发现，第一个被聚焦的元素是视觉表现上排在随后的元素，如下截图所示：

这就会产生困惑，对吧，此时我们可以使用 reading-flow 属性优化此问题，一行代码的事情：

.box {
  reading-flow: flex-visual;
}

我们再来看下实时渲染效果（Chrome 137+）：

此时第一个聚焦的元素就是最前面的“鑫”字啦。

flex-flow的作用

如果Flex容器设置设置reading-flow:flex-flow，那么，浏览器读取内容的方向就会和flex-flow属性保持一致。

PS：flex-flow属性是flex-direction和flex-wrap属性的缩写属性。

例如flex容器新增CSS样式：

.box {
  flex-direction: row-reverse;
  reading-flow: flex-flow;
}

那么焦点聚焦的顺序就会是“鑫-旭-张”，从后往前依次聚焦，实时渲染效果如下：

如果我们取消第一项所设置的order:2，焦点方向还是从后往前，也就是按照Flex方向的聚焦顺序，不受DOM在文档中的顺序影响。

三、Grid布局中的reading-flow属性

由于Grid是二维布局的，因此，在Grid布局中，reading-flow属性支持的值要多一些，示意：

reading-flow: grid-columns;
reading-flow: grid-rows;
reading-flow: grid-order;

还是通过案例进行学习。

HTML基本结构和CSS如下：

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}
.wrapper a:nth-child(2) {
  grid-column: 3;
  grid-row: 2 / 4;
}
.wrapper a:nth-child(5) {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

此时的布局效果渲染如下，Tab索引顺序则按照DOM的顺序执行，也就是甲乙丙丁戊，但是，这并不是布局上的视觉顺序。
甲乙丙丁戊
如果我们希望Tab顺序按照视觉顺序水平聚焦，则就可以设置：
.wrapper {
  reading-flow: grid-rows;
}
实时渲染效果如下：
甲乙丙丁戊
此时，焦点聚焦的顺序就是“戊-甲-乙-丙-丁”，如下示意图所示：

再看看grid-columns的效果：
.wrapper {
  reading-flow: grid-columns;
}
可以键盘访问下面的布局亲自感受焦点顺序（Chrome 137+）：
甲乙丙丁戊
此时，焦点聚焦的顺序就是“戊-丙-丁-甲-乙”，如下示意图所示：

关于grid-order
这个用在使用order属性改变网格顺序的场景下，此时，焦点属性会优先按照order属性切换，例如：
.wrapper {
  reading-flow: grid-order;
}
.wrapper a:nth-child(4) {
  order: -1;
}
此时，优先被聚焦的是“丁”这个设置了order:-1的网格。
实时效果：
甲乙丙丁戊
四、什么时候使用reading-order属性
reading-order属性通常和reading-flow:source-order声明配合使用，可以强制任意布局中，子项的焦点获取顺序，值为数值，可以是负值，例如：
<div class="follow">
 <a href="##">欢迎</a>
 <a href="##">抖音</a>
 <a href="##">关注</a>
<a href="##" class="me">最会钓鱼的程序员</a>
</div>
.follow {
  display: flow-root;
  reading-flow: source-order;
}
.me {
  reading-order: -1;
}
实时效果如下，可以看到，我的抖音钓鱼账号的名称“最会钓鱼的程序员”被第一个聚焦了！
欢迎抖音关注最会钓鱼的程序员
截图示意：

四、兼容性、结语
目前reading-flow和reading-order属性仅Chrome浏览器，极其使用其内核的浏览器支持：

不过此特性是渐进增强特性，可以放心使用，基本上，我建议，只要是Flex布局，都可以加上reading-flow:flex-visual这么一句话，浏览器不支持，或者Flex布局本身顺序正常，那就还和现在一样，但是如果浏览器支持，用户的无障碍访问体验就会UP，这种只有好处，没有坏处的事情，没有理由不去做他！
结语碎碎念
这些边边角角的CSS新特性实在是太多了，我每周介绍一个，感觉都来不及。
但是，怎么讲呢？大多都是锦上添花的东西，现有的技术也能解决，但是由于兼容性等原因，学了，也不能立即使用，这就导致这些新特性啊，大多都会湮没在时代的洪流中。
以后这种学习的事情啊，我觉得都会交给AI了。
来，我的仆人AI酱，帮我把这段代码的无障碍访问体验提高下。
然后AI酱：“好滴，我最美丽的主人，让我看看这段代码，哦，这样子，我明白了，确实可以提升，我搜到了一个名叫钓鱼佬的博客，里面有介绍到reading-flow和reading-order属性，可以一用……”
瞧瞧没，需要学习吗？不需要。
那我写这些东西还有什么意义呢？值得深思的问题。
好了，就这样吧，感谢阅读，欢迎转发，在新特性的学习这方面，人类比AI还是有个半年到一年的优势的。
有请落云宗柳玉掌门压阵：