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 要求之一。我们怀疑，这可能是某些网站基本上使用空提取处理脚本的原因。但是，启动 Service Worker 并执行空操作监听器只会产生开销，而不会带来任何可以通过合适的 Service Worker 实现的优势，例如缓存或离线功能。因此，Chrome 现在会跳过这些内容，以提升导航体验。

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

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

等等！

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

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

深入阅读

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

订阅

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

我是 Adriana Jara，Chrome 113 发布后，我会立刻跟大家分享 Chrome 的新变化！