了解 2023 年 5 月在稳定版和 Beta 版网络浏览器中推出的一些有趣功能。
稳定版浏览器
2023 年 5 月,Firefox 113、Chrome 113、Chrome 114 和 Safari 16.5 已稳定发布。我们来看看这对 Web 平台意味着什么。
WebGPU
Chrome 113 包含 WebGPU,它是 WebGL 和 WebGL 2 图形 API 的后继者。它提供 GPU 计算、更低的 GPU 硬件访问开销、从单个图形设备渲染到多个画布等现代功能,以及更出色、更可预测的性能。
First-Party Set
第一方集 (FPS) 是 Privacy Sandbox 的一部分。组织可以通过此方法声明网站之间的关系,以便浏览器决定何时允许一组网站获得有限的第三方 Cookie 访问权限。FPS 已在 Chrome 113 中开始分阶段发布。
CSS 媒体功能等
对于 CSS,Chrome 113 包含 overflow-inline
和 overflow-block
媒体功能。
以及 update
媒体功能。
此外,还添加了 linear()
缓动函数,您可以参阅使用 linear()
缓动函数在 CSS 中创建复杂的动画曲线一文,详细了解该函数。
浏览器支持
CSS 颜色级别 4 功能
Firefox 113 包含 color()
、lab()
、lch()
、oklab()
、oklch()
和 color-mix()
函数表示法,以及 forced-color-adjust 属性。这意味着,现在所有三个主要引擎都支持新的颜色空间和函数。如需详细了解这些色彩空间和函数,请参阅高清 CSS 颜色指南。
更好地控制 :nth-child()
选择
Firefox 113 还添加了将选择器列表传递到 :nth-child()
和 nth-last-child()
的功能。如需详细了解此方法,并查看示例,请参阅使用 S 语法更好地控制 :nth-child() 选择一文。
浏览器支持
Compressions Streams API
由于已纳入 Firefox 113,Compressions Streams API 现在在所有三个主要引擎中都受支持,可用于压缩和解压缩数据流。这意味着,JavaScript 应用无需再捆绑压缩库。
CSS 嵌套
Safari 16.5 解决了大多数问题,但也添加了对 CSS 嵌套的支持,并提供了新的嵌套选择器 >
,用于嵌套相关样式规则,使用方式对使用过预处理器的开发者来说会很熟悉:
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
使用 text-wrap: balance
平衡标题
从 Chrome 114 开始,您可以使用 text-wrap: balance
。这样,您就可以平衡标题,避免最后一行只有一个字,从而获得更美观、更易读的结果。如需了解详情,请参阅 CSS text-wrap: balance。
CHIPS:具有独立分区状态的 Cookie
作为逐步淘汰第三方 Cookie 工作的一部分,CHIPS 支持使用新的 Cookie 属性 Partitioned
选择启用按顶级网站划分的第三方 Cookie。CHIPS 在 Chrome 114 中提供。
Popover API
Chrome 114 中还提供了 Popover API,可让您更轻松地构建在所有其他 Web 应用界面之上显示的暂时性界面 (UI) 元素。
这些元素包括可与用户互动的元素,例如操作菜单、表单元素建议、内容选择器和教学界面。
借助新的 popover 属性,您可以自动在顶层中显示任何元素。这意味着,开发者无需再担心定位、堆叠元素、焦点或键盘互动。
如需了解详情,请参阅介绍 popover API。
Beta 版浏览器
通过浏览器 Beta 版,您可以抢先体验即将推出的浏览器稳定版中提供的功能。在全球用户获得该版本之前,您可以先测试可能会影响您网站的新功能或移除的功能。新版 Beta 版为 Firefox 114、Chrome 115 和 Safari 16.6。这些版本为该平台带来了许多出色的功能。如需了解所有详情,请参阅版本说明,下面列出了其中的几个亮点。
Chrome 115 为 CSS display
属性提供了多个值。这意味着 display: flex
会变为 display: block flex
,display: block
会变为 display: block flow
。单个值会作为旧版关键字进行维护,一旦在 Chrome 稳定版中发布,系统就会在所有引擎中提供多个值。
Chrome 115 中还包含 Web 动画规范的 ScrollTimeline
和 ViewTimeline
扩展。这些属性可通过 CSS 和 JavaScript 实现滚动条驱动的动画。
Firefox 114 包含 WebTransport API,这是对 WebSockets 的现代更新,支持多串流、单向串流和无序传送。