Chrome 120 的新变化

Adriana Jara

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

• CloseWatcher API 可以在处理关闭请求时提供一致的体验。
• 使用 <details> 元素轻松实现手风琴模式。
• 现已推出权限政策违规报告。
• 还有许多其他功能。

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

CloseWatcher API。

模态组件或弹出组件的一个重要特征是它们可以轻松关闭，并且具有一致的关闭机制。这些机制称为关闭请求，在桌面平台上通常是 ESC 键，在 Android 上则是返回手势或按钮。

Web 开发者无法为自己的组件处理关闭请求。这在 Android 设备上尤其容易出现问题，因为在 Android 设备上为返回手势提供简单的关闭行为相当复杂。

Chrome 120 为此类解决方案引入了 CloseWatcher，这是一个可直接监听和响应关闭请求的全新 API。此外，它还升级了 <dialog> 和 popover=""，以便使用新的关闭请求框架，以便它们能够响应 Android 返回按钮。

不妨试用一下 CloseWatcher API 演示。

<details> 名称属性

借助 <details> 元素的 name 属性，您可以使用一系列 <details> HTML 元素轻松实现手风琴模式。

多个具有相同 name 的 <details> 元素形成一个组。采用此设置时，同一组中最多只能打开 1 个元素。

以下示例中的群组具有相同的名称 cookies：

<details name="cookies">
  <summary>Chocolate chip</summary>
  Yum yum chocolate chip.
</details>
<details name="cookies">
  <summary>Snickerdoodle</summary>
   Yum yum snickerdoodle.
</details>
<details name="cookies">
  <summary>Maicenitas</summary>
   Yum yum maicenitas.
</details>
<details name="cookies">
  <summary>Sugar cookies</summary>
   Yum yum sugar cookies.
</details>

权限政策违规报告

您现在可以查看权限政策违规行为报告；这些报告集成了 Permissions Policy API，开发者可通过使用 Reporting API 声明一组政策供浏览器强制执行，从而控制页面及其 iframe 和子资源可用的浏览器功能。Reporting API 为 Web 应用提供了一种通用报告机制，用于根据多种平台功能提供报告。

这种 Permissions Policy API 与 Reporting API 的集成让 Web 开发者可以配置端点，将权限政策违规报告发送到这些端点，让网站所有者了解当相应页面请求访问禁止使用的功能时。

使用“权限”政策控制浏览器功能包含更多实现详情。

等等！

当然还有很多其他功能。

• 宽松的 CSS 嵌套实现允许嵌套样式规则从元素开始，而不是用 is() 封装或在前面要求使用 & 符号。

• 借助 Media Session API 中的 enterpictureinpicture 操作，网站可以注册一个操作处理程序，用于打开“画中画”或“文档画中画”窗口。

• 温馨提示：Chrome 正在努力弃用第三方 Cookie。今年 1 月份，一项可能会影响您网站的实验开始，因此请务必查看为停用第三方 Cookie 做好准备，以执行审核和缓解步骤。

深入阅读

本指南仅涵盖部分重要内容。请访问以下链接 Chrome 120 中的其他变更。

• Chrome 开发者工具的新变化 (120)
• Chrome 120 弃用和下架
• 针对 Chrome 120 的 ChromeStatus.com 更新
• Chromium 源代码库更改列表
• Chrome 发布日历

订阅

要随时掌握最新动态，请订阅 Chrome 开发者 YouTube 频道， ，每当我们发布新视频时，您都会收到电子邮件通知。

亲爱的 Adriana Jara，我们的团队祝您节日快乐！待 Chrome 121 发布后，我会随时为您介绍 Chrome 的新变化！