4 月新增 Web 平台

了解 2023 年 4 月在稳定版和 Beta 版网络浏览器中推出的一些有趣功能。

Rachel Andrew

稳定版浏览器

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

inert 属性

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

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

现在，这三个引擎均支持此属性。

浏览器支持

  • Chrome：102.
  • Edge：102.
  • Firefox：112.
  • Safari：15.5。

来源

linear() 缓动函数

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

浏览器支持

  • Chrome：113.
  • Edge：113.
  • Firefox：112.
  • Safari：17.2。

CSS 嵌套

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

.nesting {
  color: hotpink;

  > .is {
    color: rebeccapurple;

    > .awesome {
      color: deeppink;
    }
  }
}

浏览器支持

  • Chrome：120.
  • Edge：120。
  • Firefox：117.
  • Safari：17.2。

来源

CSS animation-composition

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

浏览器支持

  • Chrome：112.
  • Edge：112.
  • Firefox：115.
  • Safari：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，它是 WebGL 和 WebGL 2 图形 API 的后继者。它提供 GPU 计算、更低的 GPU 硬件访问开销、从单个图形设备渲染到多个画布等现代功能，以及更出色、更可预测的性能。

“新手入门 Web 系列”的一部分