Chrome 121 的新变化

Adriana Jara

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

我是 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 中。

推测规则 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> 元素的替代方案。此标头的值必须是指向 MIME 类型为 "application/speculationrules+json" 的文本资源的网址。资源的规则将添加到文档的规则集中。

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

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

Element Capture API 源试用

Element Capture API 目前处于源试用阶段。借助此 API，您可以捕获并记录特定的 HTML 元素。它将整个标签页的捕获转换成特定 DOM 子树的捕获，仅捕获 target 元素的直接后代。也就是说，它会剪裁并移除被遮挡和被遮挡的内容。

举例来说，借助一款视频会议应用，您可以在 iframe 中嵌入第三方应用，而 Element Capture API 的作用如下。在这种情况下，您可能希望以视频形式捕获该 iframe，并将其传输给远程参与者。

Chrome 中视频会议通话的屏幕截图。
Elad 在与 François 的视频会议通话中使用第三方应用。

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

已截取下拉列表的屏幕截图。
Elad 的下拉列表会显示在 François 收到的内容上方。

Element Capture API 可让您定位要共享的元素，从而解决此问题。

视图中没有下拉列表的目标元素的屏幕截图。
François 没有看到来自 Elad 的下拉列表。

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

等等！

当然还有很多其他功能。

  • resizeBy() 和 resizeTo() 方法是 Document Picture-in-Picture API 的一部分，现在需要使用用户手势。

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

  • scope_extensions 正处于源试用阶段，它允许扩展 Web 应用的行为以包含其他源，但前提是 Web 应用的主要来源与关联的源之间达成一致。

深入阅读

本指南仅涵盖部分重要内容。请访问以下链接 Chrome 121 中的其他变更。

订阅

要随时掌握最新动态，请订阅 Chrome 开发者 YouTube 频道， ，每当我们发布新视频时，您都会收到电子邮件通知。

亲爱的 Adriana Jara，Chrome 122 一发布，我都会在这里向大家介绍 Chrome 的新变化！