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 开始，如果用户代理确定服务工作器的所有提取监听器都是无操作，则会从导航关键路径中省略服务工作器启动和监听器调度。

此功能可加快浏览这些页面的速度。

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

作为这项变更的一部分，如果所有服务工作器的提取监听器都没有操作，Chrome 将显示控制台警告，并鼓励开发者移除这些提取监听器。

DevTools 中针对空的 Service Worker 提取处理程序的警告。

等等！

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

  • document.domain 的 setter 现已废弃。
  • WebView 中针对 X-Requested-With header 弃用的源代码试用版
  • 现在，DevTools 中的录制器可以使用穿透选择器进行录制。

深入阅读

本指南仅涵盖部分重要内容。如需了解 Chrome 112 中的其他变更，请参阅以下链接。

订阅

如需了解最新动态，请订阅 Chrome Developers YouTube 频道，每当我们发布新视频时，您都会收到电子邮件通知。

我是 Adriana Jara，Chrome 113 发布后，我会立即为您介绍 Chrome 中的新变化！