Chrome 112 的新变化

以下是您有必要知道的信息:

我是 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 就会显示控制台警告,并建议开发者移除这些提取监听器。

DevTools 中有关空 Service Worker 提取处理程序的警告。

还有更多其他奖励!

当然还有许多其他功能。

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

深入阅读

这里仅介绍一些重要的亮点。如需了解 Chrome 112 中的其他变化,请点击以下链接。

订阅

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

我是 Adriana Jara