以下是您有必要知道的信息:
- CSS 现在支持嵌套规则。
- 更新了
<dialog>
元素用于设置初始焦点的算法。 - 从现在开始,Service Worker 将跳过空操作
fetch()
处理程序,以提高导航速度。 - 还有许多更多内容。
我是 Adriana Jara。我们来深入了解下,看看 Chrome 112 会为开发者带来哪些新变化。
CSS 对嵌套的支持。
我们最喜欢的 CSS 预处理器功能之一现在已经内置于该语言中:嵌套样式规则。
在嵌套之前,每个选择器都需要单独进行显式声明。这会导致重复、大量样式表以及分散的创作体验。
.nesting { color: hotpink; } .nesting > .is { color: rebeccapurple; } .nesting > .is > .awesome { color: deeppink; }
嵌套之后,选择器可以继续进行,并且与其相关的样式规则可以归为一组。
.nesting { color: hotpink; > .is { color: rebeccapurple; > .awesome { color: deeppink; } } }
嵌套可以帮助开发者减少重复使用选择器的需求,同时还能为相关元素共置样式规则。它还有助于样式与其定位的 HTML 相匹配。
如果示例中的 .nesting
组件已从项目中移除,那么您可以删除整个组,而无需在文件中搜索相关的选择器实例。
嵌套可帮助您:
- 整理。
- 缩减文件大小。
- 重构。
如需关于充分利用 CSS 嵌套的提示,请参阅这篇文章;如需在开发者工具中找到对嵌套的支持,请点击此处。
<dialog>
初始焦点的算法更新。
HTML <dialog>
元素是表示对话框或其他交互式组件(例如可关闭的提醒或子窗口)的标准化方式,此类组件需要显示在网页中的所有其他内容上方。
我们建议使用此 HTML 元素创建此类内容,因为其功能旨在提供更好、一致的易用性和可访问性。
其中一项功能是处理在对话框打开时获得焦点的元素,在此版本中,选择该元素的算法已更新。
从现在起:
对话框聚焦步骤会查看键盘可聚焦的元素,而不是任何可聚焦的元素
如果 <dialog>
元素设置了 autofocus 属性,它本身便会获得焦点
<dialog>
元素本身会获得焦点作为后备选项,而不是焦点被“重置”到 <body>
元素。
如需详细了解 <dialog>
元素,请参阅文档。
跳过 Service Worker 空操作提取处理程序。
从 Chrome 112 开始,如果用户代理确定所有 Service Worker 的提取监听器为空操作,系统将省略 Service Worker 启动过程,并且从导航关键路径中分派监听器将省略。
此功能可加快这些网页的导航速度。
拥有提取处理程序是 Web 应用可安装的 PWA 要求之一。我们怀疑这可能是某些网站本质上包含空提取处理程序的原因。然而,启动 Service Worker 并执行空操作监听器只会产生开销,无法带来任何可通过合适的 Service Worker 实现的优势,例如缓存或离线功能。因此,为了改善导航效果,Chrome 现在会跳过这类广告。
在此次更改中,如果 Service Worker 的所有提取监听器都为空操作,Chrome 就会显示控制台警告,并建议开发者移除这些提取监听器。
还有更多其他奖励!
当然还有许多其他功能。
document.domain
的 setter 现已废弃。- WebView 中针对
X-Requested-With header
的弃用提供了源试用功能 - 开发者工具中的录制器现在可以使用穿戴选择器进行录制。
深入阅读
这里仅介绍一些重要的亮点。如需了解 Chrome 112 中的其他变化,请点击以下链接。
- Chrome 开发者工具的新变化 (112)
- Chrome 112 弃用和移除
- 针对 Chrome 112 的 ChromeStatus.com 更新
- Chromium 源代码库更改列表
- Chrome 发布日历
订阅
如需随时了解最新动态,请订阅 Chrome Developers YouTube 频道,每当我们发布新视频时,您都会收到电子邮件通知。
我是 Adriana Jara