Chrome 137 中的新变化

Rachel Andrew

发布时间：2025 年 5 月 27 日

Chrome 137 现已推出，本文将介绍此版本中的一些主要功能。阅读完整的 Chrome 137 版本说明。

此版本的亮点：

使用 reading-flow 和 reading-order 可确保复杂布局中的标签页顺序符合逻辑。CSS if() 函数提供了一种简洁的方式来表达条件值。JavaScript Promise 集成 (JSPI) 可让 WebAssembly 应用与 JavaScript promise 集成。

CSS `reading-flow` 和 `reading-order`

reading-flow CSS 属性用于控制 flex、网格或块布局中的元素向无障碍工具公开的顺序，以及使用线性顺序导航方法聚焦这些元素的方式。这解决了网格布局和 flex 布局长期存在的问题，即标签页顺序可能会与项的布局顺序断开连接。

它接受一个关键字值，默认值为 normal，该值可保持按 DOM 顺序对元素进行排序的行为。如需在 flex 容器中使用它，请将其值设置为 flex-visual 或 flex-flow。如需在网格容器内使用它，请将其值设置为 grid-rows、grid-columns 或 grid-order。

借助 reading-order CSS 属性，您可以手动替换阅读流容器中商品的顺序。如需在网格、弹性或块容器内使用此属性，请将容器的 reading-flow 值设置为 source-order，并将各个项目的 reading-order 设置为整数值。

如需了解详情，请参阅使用 CSS reading-flow 实现逻辑顺序焦点导航。

CSS `if()` 函数

CSS if() 函数提供了一种简洁的方式来表达条件值。该函数接受一系列以英文分号分隔的条件-值对。该函数会按顺序评估每个条件，并返回与第一个为 true 的条件关联的值。如果所有条件的计算结果均为 false，该函数会返回一个空令牌流。

div {
  color: var(--color);
  background-color: if(style(--color: white): black; else: white);
}

.dark {
  --color: black;
}

.light {
  --color: white;
}

<div class="dark">dark</div>
<div class="light">light</div>

WebAssembly JavaScript Promise 集成 (JSPI)

JavaScript Promise Integration (JSPI) 是一种 API，可让 WebAssembly 应用与 JavaScript promise 集成。

它允许 WebAssembly 程序充当 Promise 的生成器，并允许 WebAssembly 程序与具有 Promise 的 API 进行交互。

具体而言，当应用使用 JSPI 调用具有 Promise 的 (JavaScript) API 时，WebAssembly 代码会被暂停；并且 WebAssembly 程序的原始调用方会获得一个 Promise，该 Promise 将在 WebAssembly 程序最终完成时得到兑现。

以及更多！

当然，还有更多：

作为存储空间分区功能的延续，Chrome 已实现按存储空间键对 Blob 网址访问进行分区。
现在已实现 Canvas 浮点像素格式。
支持 offset-path: shape()，因此您可以使用自适应形状来设置动画路径。

深入阅读

以下仅介绍了一些重点内容。如需了解 Chrome 137 中的其他更改，请点击以下链接。

如需及时了解最新动态，请订阅 Chrome Developers YouTube 频道，这样每当我们发布新视频时，您都会收到电子邮件通知。您也可以在 X 或 LinkedIn 上关注我们，获取新文章和博文。

Chrome 138 发布后，我们会立即在此处告知您 Chrome 中的新变化！

Chrome 137 中的新变化 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

CSS reading-flow 和 reading-order

CSS if() 函数