Chrome 112 的新变化

Adriana Jara

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

我是 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> 元素本身就会获得焦点

<dialog> 元素本身作为后备选项获得焦点，而不是“重置”焦点添加到 <body> 元素中。

如需详细了解 <dialog> 元素，请参阅文档。

跳过 Service Worker 无操作提取处理程序。

从 Chrome 112 开始，Service Worker 将启动，并且如果用户代理识别出所有 Service Worker 的提取监听器都为空操作，则从导航关键路径中调度监听器将会被忽略。

此功能可加快这些网页的导航速度。

拥有提取处理程序是 Web 应用可安装的一项 PWA 要求。我们怀疑，这可能是一些网站本质上为空的提取处理程序的原因。不过，启动 Service Worker 并执行空操作监听器只会产生开销，而不会带来任何可以通过合适的 Service Worker 实现的优势，例如缓存或离线功能。因此，Chrome 现在会跳过此类通知以改善导航体验。

在进行这项更改的过程中，如果所有 Service Worker 的提取监听器都为空，Chrome 将显示控制台警告，并建议开发者移除这些提取监听器。

DevTools 中会出现关于空 Service Worker 提取处理程序的警告。

等等！

当然，还有更多其他功能。

  • document.domain 的 setter 现已废弃。
  • WebView 中已针对 X-Requested-With header 废弃了源试用。
  • 开发者工具中的记录器现在可以使用穿孔选择器进行录制。

深入阅读

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

订阅

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

我是 Adriana Jara，Chrome 113 发布后，我会随时为您效劳 告诉您 Chrome 中的新变化！