4 月新增 Web 平台

探索 2023 年 4 月在稳定版和 Beta 版网络浏览器中登陆的有趣功能。

Rachel Andrew

浏览器稳定版

2023 年 4 月，Firefox 112 和 Chrome 112 成为稳定版。我们来看看这对网络平台意味着什么。

inert 属性

Firefox 112 包含 inert 全局属性。此属性告知浏览器忽略该元素，指明不应为互动内容。其中包括：

  • 防止触发 click 事件。
  • 阻止元素获得焦点。
  • 从无障碍功能树中排除相应元素及其内容。

现在，此属性可在所有三个引擎中互操作。

浏览器支持

  • 102
  • 102
  • 112
  • 15.5

来源

linear() 加/减速函数

linear() 加/减速函数可启用多个点之间的线性插值。这样可以实现更复杂的动画，例如弹跳和弹性效果。此函数在 Firefox 112 中。

浏览器支持

  • 113
  • 113
  • 112
  • 17.2

CSS 嵌套

Chrome 112 增加了对 CSS 嵌套的支持，这是许多开发者备受期待的功能。这引入了一个新的嵌套选择器 >，它用于嵌套相关的样式规则，使用预处理器的开发者熟悉的方式：

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

浏览器支持

  • 120
  • 120
  • 117
  • 17.2

来源

CSS animation-composition

Chrome 112 还支持 animation-composition。如需了解此属性的工作方式，请参阅指定如何使用 Animation-composition 指定多个动画效果的合成方式。

浏览器支持

  • 112
  • 112
  • 115
  • 16

来源

新的无头模式

如果您使用 Chrome 的无头模式（例如使用 Puppeteer），那么 112 会带来全新的无头模式。如需了解详情，请参阅 Chrome 的无头模式已升级。

Beta 版浏览器版本

通过 Beta 版浏览器，您可以预览浏览器下一个稳定版本的新功能。不妨趁此时机测试一下新功能或内容移除，这些新功能或内容可能会在全球发布之前对您的网站产生影响。新的 Beta 版产品包括 Firefox 113 和 Chrome 113，并且 Safari 16.5 Beta 版仍在开发中。这些版本为平台带来了许多很棒的功能。如需了解所有详细信息，请查看版本说明，以下是一些亮点。

Firefox 113 包含 color()、lab()、lch()、oklab() 和 oklch() 函数。此外，还包含 CSS Color 5 中的 color-mix() 函数以及 forced-color-adjust 属性。

Firefox 还包含 nth-child of <selector> 语法，可以更精细地控制您要选择的元素。如需了解详情，请参阅使用 S 语法更好地控制 :nth-child() 选择。

对于 CSS，Chrome 113 包含 overflow-inline、overflow-block 和 update 媒体功能。也包含在 linear() 加/减速函数和无前缀的 image-set() 类型中。

Chrome 113 还包含 WebGPU，是适用于 Web 的 WebGL 和 WebGL 2 图形 API 的继任者。它提供各种现代功能，例如 GPU 计算、更低的 GPU 硬件开销访问、通过单个图形设备渲染到多个画布的功能，以及更好、更可预测的性能。

“网络新体验”系列视频的一部分