Chrome 121 的新变化

Adriana Jara

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

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

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

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

Element Capture API 源试用

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

Element Capture API 非常适合用于视频会议应用，让您能够在 iframe 中嵌入第三方应用。在这种情况下，您可能希望以视频形式捕获该 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 的新变化！