Chrome 116 的新变化

Adriana Jara

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

我是 Adriana Jara。我们来深入了解一下 Chrome 116 中面向开发者的新功能。

Document Picture-in-Picture API。

借助文档画中画 API，您可以打开一个始终位于顶部的窗口，并在其中填充任意 HTML 内容。

一个画中画窗口，其中播放着 Sintel 预告片视频。
使用 Document Picture-in-Picture API 创建的画中画窗口（演示）。

Document Picture-in-Picture API 中的画中画窗口类似于使用 window.open() 打开的空白同源窗口，但存在一些差异：

  • 画中画窗口会浮动在其他窗口之上。
  • 画中画窗口的生命周期绝不会超过打开的窗口。
  • 无法浏览画中画窗口。
  • 网站无法设置画中画窗口位置。

以下 HTML 会设置自定义视频播放器和按钮元素，以便在画中画窗口中打开视频播放器。

<div id="playerContainer">
  <div id="player">
    <video id="video"></video>
  </div>
</div>
<button id="pipButton">Open Picture-in-Picture window</button>

当用户点击按钮以打开空白的画中画窗口时，以下 JavaScript 会调用 documentPictureInPicture.requestWindow()。返回的 promise 会解析为画中画窗口 JavaScript 对象。系统会使用 append() 将视频播放器移至该窗口。

pipButton.addEventListener('click', async () => {
  const player = document.querySelector("#player");

  // Open a Picture-in-Picture window.
  const pipWindow = await documentPictureInPicture.requestWindow();

  // Move the player to the Picture-in-Picture window.
  pipWindow.document.body.append(player);
});

如需了解详情和查看示例，请参阅为任何元素启用画中画。

开发者工具缺少样式表调试方面的改进。

开发者工具进行了多项改进，以便识别和调试缺少样式的相关问题。

首先：来源 > 网页树现在仅显示成功部署和加载的样式表，以最大限度地减少混淆。

此外，现在，Sources > Editor 会在失败、@import、url() 和 href 语句旁边添加下划线，并显示内嵌错误提示。

“来源”面板中带有提示的带下划线的语句。

  • 除了指向失败请求的链接之外，控制台现在还会提供指向引用未能加载的样式的确切行数的链接。

控制台会提供指向存在问题的语句的确切行数的链接。

“网络”面板会始终在 Initiator 列中填充指向引用未能加载的样式表的确切行数的链接。

“问题”面板会列出所有样式表加载问题，包括网址损坏、请求失败和 @import 语句放错位置。

“问题”面板，其中包含指向来源和请求的链接。

如需了解有关 Chrome 116 中 DevTools 的所有详细信息，请参阅 DevTools 中的新变化。

等等！

当然，还有许多其他功能。

  • 借助动作路径，作者可以放置任何图形对象，并沿开发者指定的路径为其添加动画效果。
  • 关键帧动画现在支持 display 和 content-visibility 属性，这让您可以完全通过 CSS 添加退出动画。
  • 现在，您可以将提取 API 与自定义缓冲区读取器搭配使用，从而减少垃圾回收开销和副本，并提高对用户的响应能力。

深入阅读

本文仅介绍了一些主要亮点。如需了解 Chrome 116 中的其他变更，请点击以下链接。

订阅

如需及时了解最新动态，请订阅 Chrome 开发者 YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。

我是 Adriana Jara，Chrome 117 发布后，我会立即为您介绍 Chrome 中的新变化！