此页面由 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 支持文档规则：它们是推测规则语法的扩展，可让浏览器从网页中的元素获取用于推测性加载的网址列表。文档规则可能包含用于确定可以使用哪个链接的条件。结合使用新的“紧急程度”字段后，您可以立即在用户悬停或按下鼠标时自动预提取或预渲染网页上的链接。

以下是文档规则示例：

{
  "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 的改进。