Chrome 120 的新变化

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

我是 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 开发者 YouTube 频道, ,每当我们发布新视频时,您都会收到电子邮件通知。

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