Chrome 121 发布，新特性一览！

ConardLi

发布于 2024-01-31 13:27:23

44100

代码可运行

文章被收录于专栏：code秘密花园

运行总次数：0

代码可运行

最近 Chrome 发布了 121 版本，我们一起来看看有哪些值得关注的更新吧～

Element Capture API 开始实验

Element Capture API 可以让你捕获并记录一个特定的 HTML 元素。换句话说，它能剪裁并去除那些遮盖和被遮盖的内容。

举个例子，Element Capture API 可能会在 Web 视频会议应用里派上用场。比如我们在 ifram 中嵌入了第三方应用，在这种情况下，你可能希望将这个 ifram 作为视频捕获并传输给远程参与者。

在以前，我们可以使用 Region Capture 来实现这个功能，但在这种情况下，如果有一些内容，比如下拉列表，显示在所选内容的上方，那么这个下拉列表也会成为录制的一部分。

Element Capture API 通过让你锁定要捕获的元素来解决这种问题。

具体怎么使用呢，大概的思路如下：

captureTarget 是你页面上包含用户希望捕获的内容的元素。我们希望视频会议的 web 应用程序捕获 captureTarget 并与远程参与者分享。然后我们从 captureTarget 中派生出一个 RestrictionTarget。通过使用这个 RestrictionTarget 限制视频轨道之后，这个视频轨道上的帧现在只包含属于 captureTarget 及其直接 DOM 后代的像素。

如果 captureTarget 改变大小、形状或位置，视频轨道会进行跟踪，我们不需要从 web 应用程序获得任何额外的输入。同样，出现、消失或移动的遮盖内容也无需特殊处理。

我们来看看代码怎么写，首先，允许用户捕获当前标签页。

// 请求用户授权，开始捕获当前的标签页。
const stream = await navigator.mediaDevices.getDisplayMedia({
 preferCurrentTab: true,
});
const [track] = stream.getVideoTracks();

通过调用 RestrictionTarget.fromElement() 并将你选择的元素作为输入，定义一个 RestrictionTarget 。

// 将 captureTarget 与一个新的 RestrictionTarget 关联起来
const captureTarget = document.querySelector("#captureTarget");
const restrictionTarget = await RestrictionTarget.fromElement(captureTarget);

然后在视频轨道上调用 restrictTo() 函数，将 RestrictionTarget 作为输入。一旦最后一个 promise 成功返回，所有后续的帧都将受到限制。

// 开始使用 RestrictionTarget 限制自我捕捉的视频轨道。
await track.restrictTo(restrictionTarget);

// 传输成功 。。。

具体的使用大家可以通过在 Glitch 上运行 Demo (https://element-capture-demo.glitch.me/) 来体验 Element Capture ：

Speculation Rules API 更新

网站可以使用 Speculation Rules API，来、以编程的方式告诉 Chrome 哪些页面需要进行预渲染，通过减少页面导航时间，创建更好的用户体验，这个 API 刚推出的时候我写了一篇文章来介绍它：

新一代 Web 预渲染技术！

在 Chrome 121 版本中 Speculation Rules API 支持了 document rules（文档规则）。

文档规则是对当前推测规则语法的扩展，可以让浏览器从页面中的元素获取用于推测性加载的 URL 列表。文档规可以让我们配置哪些链接可以使用预渲染的一些条件，配合新增的 "eagerness" 字段，可以让我们立即，悬停或点击鼠标时自动预取或预渲染页面上的链接。

下面是一个文档规则的例子:

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

另一个变化是允许通过 Speculation-Rules HTTP 响应头来指定推测规则。可以作为使用内联 <script> 元素的替代方案。这个 Header 的值必须是一个 URL，该 URL 指向一个具有 "application/speculationrules+json" MIME 类型的文本资源。该资源的规则将被添加到文档的规则集中。

另外，No-Vary-Search Header 可以让 URL 查询参数发生改变的情况下，推测性的预取也能成功匹配。其声明了 URL 查询的某些或者所有部分可以被忽略，用于匹配的目的。它可以声明查询参数键的顺序不应阻止匹配，特定的查询参数不应阻止匹配，或者只有某些已知的查询参数应该引起不匹配。

一些 CSS 语法更新

新增了 scrollbar-color 和 scrollbar-width 属性。使用它们，你可以自定义滚动条，并改变它们的颜色和宽度。

/* Keyword values */
scrollbar-color: auto;
scrollbar-color: dark;
scrollbar-color: light;

/* <color> values */
scrollbar-color: rebeccapurple green; /* Two valid colors.
The first applies to the thumb of the scrollbar, the second to the track. */

/* Global values */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: unset;

font-palette 属性允许你选择一个特定的调色板来渲染颜色字体。这个属性现在支持动画，因此在调色板之间切换变成了两个选定的调色板之间的平滑过渡。

伪元素 ::spelling-error 和 ::grammar-error 允许你自定义拼写和语法错误的颜色，使用背景颜色或其他装饰来突出显示拼写错误的单词，并实现自定义的拼写检查。

::spelling-error {
  color: red;
}

现在我们可以基于 supports() 条件导入样式表和层。如果支持条件不匹配，导入将不会被获取。
对 SVG 的 CSS 遮罩进行了改进，这是对 Chrome 120 中改进的 CSS 遮罩支持的后续更新，为 SVG 添加了新的遮罩支持（多个遮罩，以及 mask-mode，mask-composite，mask-position 和 mask-repeat）。此外，现在已经支持远程 SVG 遮罩（例如，mask: url(masks.svg#star)）。