Chrome 110 的新变化

Adriana Jara

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

  • 使用新的 :picture-in-picture 伪类为画中画元素添加自定义样式。
  • 在清单中使用 launch_handler 设置您的 Web 应用启动行为。
  • 在 iFrame 中使用 credentialless 属性嵌入未设置跨域嵌入器政策的第三方内容
  • 还有许多其他功能。

我是 Adriana Jara。下面，我们来详细了解一下 Chrome 110 中面向开发者的新功能。

:picture-in-picture 伪类

借助 Picture-in-Picture API，网站可以创建一个始终位于顶部的浮动视频窗口，以便用户在与其他内容互动时继续观看媒体内容。

现在，借助 :picture-in-picture CSS 伪类，您可以为元素添加样式，以改善体验。

以下代码段展示了如何使用画中画类向视频容器添加消息，以提醒用户视频目前正在其他位置播放。

#video-container:has(video:picture-in-picture)::before {
  bottom: 36px;
  color: #ddd;
  content: 'Video is now playing in a Picture-in-Picture window';
  position: absolute;
  right: 36px;
}

再次对视频元素使用伪类，使该元素透明以正确显示消息。

试用示例，提升画中画视频体验。

launch_handler 清单成员。

借助 Launch Handler API，您可以控制 Web 应用的启动方式，例如它是使用现有窗口还是新窗口，以及所选窗口是否会导航到启动网址。

我们来看一个示例：在桌面环境中，如果您安装某个应用，然后在浏览器中访问该应用，则会看到一个用于转到独立应用窗口的按钮。 以前，唯一可能的行为是在新窗口中启动应用。

现在，网络应用可以使用 launch_handler 清单成员来自定义其启动行为。

例如，以下代码段会导致此 Web 应用的所有启动都聚焦于现有应用窗口并导航到该窗口（如果存在），而不是始终启动新窗口。

{
 "launch_handler": {
   "client_mode": "navigate-new"
 }
}

credentialless iframe。

跨源隔离的最大挑战之一是，所有跨源 iframe 都必须部署 COEP 和 CORP。浏览器不会加载不包含这些标头的 iframe。

credentialless 属性有助于嵌入未设置这些标头的第三方 iframe。

使用 credentialless 时，iframe 会从其他空白上下文加载。具体而言，它在加载时不使用 Cookie。iframe 以空 Cookie Jar 开头。

同样，LocalStorage、CacheStorage 等存储 API 会在新的临时分区中加载和存储数据。卸载顶级文档后，系统会清除所有这些存储空间。这样可以移除 COEP 限制。

如需详细了解如何安全地使用 credentialless 将第三方内容加载到 iframe 中，请参阅这篇文章。

等等！

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

现在，不安全情境中的 Web SQL 已被移除。

CSS initial-letter 属性提供了一种设置首字母应向下沉入后续文本行数的方法。

FileSystemHandle 现在包含 remove() 方法。

深入阅读

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

订阅

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

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