了解 2023 年 4 月在稳定版和 Beta 版网络浏览器中推出的一些有趣功能。
稳定版浏览器
2023 年 4 月,Firefox 112 和 Chrome 112 已变为稳定版。我们来看看这对 Web 平台意味着什么。
inert
属性
Firefox 112 包含 inert
全局属性。此属性会告知浏览器忽略该元素,表明相应内容不应具有互动性。其中包括:
- 防止触发
click
事件。 - 阻止元素获得焦点。
- 从无障碍功能树中排除该元素及其内容。
现在,这三个引擎均支持此属性。
linear()
缓动函数
linear()
缓动函数可在多个点之间实现线性插值。这样可以实现更复杂的动画,例如弹跳和弹性效果。此函数在 Firefox 112 中可用。
浏览器支持
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 版是 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 硬件访问开销、从单个图形设备渲染到多个画布等现代功能,以及更好、更可预测的性能。
网络新书系列