4 月新增 Web 平台

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

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

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 113Chrome 113Safari 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-inlineoverflow-blockupdate 媒体功能。也包含在 linear() 缓动函数和无前缀的 image-set() 类型中。

Chrome 113 还包含 WebGPU,它是 WebGL 和 WebGL 2 图形 API 的后继者。它提供 GPU 计算、更低的 GPU 硬件访问开销、从单个图形设备渲染到多个画布等现代功能,以及更出色、更可预测的性能。

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