Chrome 110 的新变化

Adriana Jara

以下是您有必要知道的信息：

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

我是 Adriana Jara。我们来深入了解一下 Chrome 110 会为开发者带来哪些新变化。

:画中画伪类

借助 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 应用可以自定义其启动行为。

例如，以下代码段会使此 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 Developers YouTube 频道，每当我们发布新视频时，您都会收到电子邮件通知。

我是 Adriana Jara。Chrome 111 发布后，我会在这里告诉大家 Chrome 的新变化！