以下是您有必要知道的信息:
- 利用 CloseWatcher API,您可以在处理关闭请求时获得一致的体验。
- 使用
<details>
元素轻松实现手风琴模式。 - 现已推出权限政策违规行为报告。
- 还有许多更多内容。
我是 Adriana Jara。我们来深入了解一下 Chrome 120 会为开发者带来哪些新变化。
CloseWatcher API。
模态或弹出式组件的一个重要特点是易于关闭,并采用一致的机制来关闭。这些机制称为关闭请求,在桌面平台上通常是 ESC
键,在 Android 上则是返回手势或按钮。
Web 开发者没有好的方法可以处理他们自己的组件的关闭请求。这在 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>
权限政策违规报告
权限政策违规行为报告现已推出Reporting API 为网络应用提供了一种通用报告机制,用于根据若干平台功能提供报告。
利用 Permissions Policy API 和 Reporting API 的集成,网站开发者可以配置端点,将政策违规报告发送到哪些端点,让网站所有者了解何时会在字段中为他们的页面请求禁用功能。
使用权限政策控制浏览器功能介绍了更多实现详情。
还有更多其他奖励!
当然还有很多。
放宽的 CSS 嵌套实现允许嵌套样式规则从元素开始,而无需用
is()
封装或在前面添加 & 符号。借助 Media Session API 中的
enterpictureinpicture
操作,网站可以注册一个操作处理程序,以用于打开画中画窗口或文档画中画窗口。另外提醒一下,Chrome 正在努力弃用第三方 Cookie。1 月份开始的实验可能会影响您的网站,因此请务必查看为弃用第三方 Cookie 做好准备,以便进行审核和缓解步骤。
深入阅读
这里仅介绍一些重要的亮点。如需了解 Chrome 120 中的其他变化,请点击以下链接。
- Chrome 开发者工具的新变化 (120)
- Chrome 120 弃用和移除
- 针对 Chrome 120 的 ChromeStatus.com 更新
- Chromium 源代码库更改列表
- Chrome 发布日历
订阅
如需随时了解最新动态,请订阅 Chrome Developers YouTube 频道,每当我们发布新视频时,您都会收到电子邮件通知。
嗨,Adriana Jara,我们的团队祝您节日快乐!Chrome 121 发布之后,我会立即告诉您 Chrome 的新变化!