探索 2023 年 4 月在稳定版和 Beta 版网络浏览器中登陆的有趣功能。
浏览器稳定版
2023 年 4 月,Firefox 112 和 Chrome 112 成为稳定版。我们来看看这对网络平台意味着什么。
inert
属性
Firefox 112 包含 inert
全局属性。此属性告知浏览器忽略该元素,指明不应为互动内容。其中包括:
- 防止触发
click
事件。 - 阻止元素获得焦点。
- 从无障碍功能树中排除相应元素及其内容。
现在,此属性可在所有三个引擎中互操作。
linear()
加/减速函数
linear()
加/减速函数可启用多个点之间的线性插值。这样可以实现更复杂的动画,例如弹跳和弹性效果。此函数在 Firefox 112 中。
浏览器支持
- 113
- 113
- 112
- 17.2
CSS 嵌套
Chrome 112 增加了对 CSS 嵌套的支持,这是许多开发者备受期待的功能。这引入了一个新的嵌套选择器 >
,它用于嵌套相关的样式规则,使用预处理器的开发者熟悉的方式:
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
CSS animation-composition
Chrome 112 还支持 animation-composition
。如需了解此属性的工作方式,请参阅指定如何使用 Animation-composition 指定多个动画效果的合成方式。
新的无头模式
如果您使用 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 硬件开销访问、通过单个图形设备渲染到多个画布的功能,以及更好、更可预测的性能。
“网络新体验”系列视频的一部分