此页面由 Cloud Translation API 翻译。

Chrome 121 的新变化

Adriana Jara

以下是您需要知晓的相关信息：

使用 font-palette 动画和其他 CSS 更新为文本添加独特的触感。
Speculation Rules API 进行了改进。
您可以在源代码试用中试用 Element Capture API。
还有许多其他功能。

我是 Adriana Jara。我们来深入了解一下 Chrome 121 中面向开发者的新功能。

CSS 更新。

我们先来看看 CSS 更新：

属性 scrollbar-color 和 scrollbar-width 现已可用。借助它们，您可以自定义滚动条，并更改（您可能已经猜到了）滚动条的颜色和宽度。

借助 font-palette 属性，您可以选择特定调色板来呈现彩色字体。此属性现在支持动画，因此在 Palette 之间切换时，两个所选 Palette 之间会实现流畅的过渡。

借助伪元素 ::spelling-error 和 ::grammar-error，您可以自定义拼写和语法错误的颜色，使用背景颜色或其他装饰突出显示拼写错误的字词，并实现外观更为集成的自定义拼写检查。

改进了 SVG 的 CSS 遮罩功能，这是 Chrome 120 中改进的 CSS 遮罩功能的后续版本，为 SVG 添加了新的遮罩支持（多个遮罩以及 mask-mode、mask-composite、mask-position 和 mask-repeat）。此外，现在还支持远程 SVG 遮罩（例如 mask: url(masks.svg#star)）。

更正：本文的上一版本提及在 @import 中添加了对 supports() 条件的支持，但实际并非如此。此更改包含在 Chrome 122 中。

Speculation Rules API 更新

网站可以使用 Speculation Rules API 以编程方式告知 Chrome 要预渲染哪些网页，从而缩短网页导航时间，提升用户体验。

现在，该 API 支持文档规则：它们是推测规则语法的扩展，可让浏览器从网页中的元素获取用于推测性加载的网址列表。文档规则可能包含可以使用这些链接的条件。再搭配一个新的 "eagerness" 字段，可让您立即自动预提取或预呈现网页上的链接（鼠标悬停时或鼠标悬停时）。

以下是文档规则示例：

{
  "prerender": [
    {"where": {"and": [
       {"href_matches": "/*"},
       {"not": {"href_matches": "/logout"}},
       {"not": {"selector_matches": ".no-prerender"}}
     ]}}
  ]
}

另一项更改允许使用 Speculation-Rules HTTP 响应标头指定推测规则。标头是内嵌 <script> 元素的替代方案。此标头的值必须是指向 "application/speculationrules+json" MIME 类型文本资源的网址。资源的规则将添加到文档的规则集中。

此外，No-Vary-Search 提示可让推测性预提取进行匹配，即使网址查询参数发生变化也是如此。No-Vary-Search HTTP 响应标头声明可以忽略网址查询的部分或全部部分，以便进行匹配。它可以声明查询参数键的顺序不应阻止匹配，特定查询参数不应阻止匹配，或者只有某些已知的查询参数会导致不匹配。

如需详细了解这些变更，请参阅对 Speculation Rules API 的改进。