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 属性，您可以选择特定调色板来渲染彩色字体。此属性现在支持动画，因此在调色板之间切换时，可在两个所选调色板之间实现平滑过渡。

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

改进了针对 SVG 的 CSS 遮罩。这是对 Chrome 120 中经过改进的 CSS 遮罩支持的后续改进，为 SVG（多个遮罩，以及 mask-mode、mask-composite、mask-position 和 mask-repeat）添加了新的遮罩支持。此外，现在还支持远程 SVG 遮罩（例如，遮罩：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> 元素的替代方法。此标头的值必须是指向 MIME 类型为 "application/speculationrules+json" 的文本资源的网址。该资源的规则将添加到该文档的规则集中。

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

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

Element Capture API 源试用

Element Capture API 目前处于源试用阶段。利用此 API，您可以捕获和记录特定的 HTML 元素。它将整个标签页的捕获转换为特定 DOM 子树的捕获，仅捕获目标元素的直接后代。换言之，此功能会剪裁和移除被遮挡的内容和被遮挡的内容。

例如，支持在 iframe 中嵌入第三方应用的视频会议应用就非常适合使用 Element Capture API。在这种情况下，您可能希望将该 iframe 捕获为视频，并将其传输给远程参与者。

Elad 在与 François 进行视频会议时使用第三方应用。

请注意，您可以使用区域捕获执行此操作，但在这种情况下，如果某些内容（如下拉列表）绘制在所选内容之上，则该下拉列表会成为记录的一部分。

Elad 的下拉列表会显示在 François 收到的内容顶部。

借助 Element Capture API，您可以定位要分享的元素，从而解决了此问题。

François 没有看到 Elad 中的下拉列表。

查看从任何元素捕获视频流获取代码示例，并注册参加 ElementCapture 源试用

还有更多其他奖励！

当然还有很多。

• resizeBy() 和 resizeTo() 方法（Document Picture-in-Picture API）现在需要用户手势。

• 您可以通过编程方式使用 HTMLSelectElement 的 showPicker() 方法打开 <select> 元素的选项选择器。

• scope_extensions 目前正处于源试用阶段。借助此功能，如果 Web 应用的主要源与关联的源之间达成一致，它可展开 Web 应用的行为以包含其他源。

深入阅读

这里仅介绍一些重要的亮点。如需了解 Chrome 121 中的其他更改，请点击以下链接。

• Chrome 开发者工具的新变化 (121)
• Chrome 121 弃用和移除
• 针对 Chrome 121 的 ChromeStatus.com 更新
• Chromium 源代码库更改列表
• Chrome 发布日历

订阅

如需随时了解最新动态，请订阅 Chrome Developers YouTube 频道，每当我们发布新视频时，您都会收到电子邮件通知。

嗨，Adriana Jara。Chrome 122 发布之后，我会在这里告诉大家 Chrome 的新变化！