了解 2024 年 5 月期间在稳定版和 Beta 版网络浏览器中推出的一些有趣功能。
稳定版浏览器
2024 年 5 月,Firefox 126、Safari 17.5 和 Chrome 125 已稳定发布。本文将介绍 Web 平台中新增的功能。
CSS 锚点定位
Chrome 125 包含 CSS 锚点定位。这样,您就可以在不使用 JavaScript 的情况下,以声明方式将绝对定位的元素锚定到网页上的一个或多个其他元素(锚点)。当锚点可滚动时,锚点定位功能的效果会非常出色。一个常见的用例是将弹出式窗口(例如提示)放置在调用它的元素旁边,或者放置在选择菜单及其弹出式窗口选项列表旁边。
如需了解详情,请参阅CSS 锚点定位 API 简介。
CSS 分级值函数 - round()
、mod()
和 rem()
Chrome 125 还包含分级值函数,这意味着这些函数现在处于“新推出的基准”状态。分级值函数 round()
、mod()
和 rem()
都会根据另一个“步长值”转换给定值。
如需了解详情,请参阅 CSS 分级值数学函数现已纳入基准版 2024。
light-dark()
函数
加入“新推出的基准”的还有 CSS 颜色函数 light-dark()
,该函数在 Safari 17.5 中提供。
light-dark()
是一个接受两个参数的函数,这两个参数都必须是 <color>
。系统会根据所使用的配色方案选择其中一种。
- 如果使用的配色方案为
light
或未知,则会返回第一个值的计算值。 - 如果使用的配色方案为
dark
,则返回第二种颜色的计算值。
如需了解详情,请参阅使用 light-dark() 实现的 CSS 配色方案依赖颜色 。
Screen Wake Lock API
Firefox 126 中推出了 Screen Wake Lock API,这是“新推出的基准”中新增的另一项功能。此 API 提供了一种防止设备调暗屏幕和锁定屏幕的方法。
如需了解如何使用此功能,请参阅使用 Screen Wake Lock API 保持唤醒状态。
Compute Pressure API
Compute Pressure API 提供表示系统 CPU 负载的概要状态。它允许实现使用正确的基础硬件指标,以确保只要系统未处于不可管理的压力下,用户就可以充分利用可用的所有处理能力。
此功能在 Chrome 125 中提供。Intel 负责了此 API 的设计和实现工作,这将让视频会议应用能够动态平衡功能和性能。
@starting-style
规则
Safari 17.5 包含 @starting-style
规则。借助此 CSS at-rule,您可以应用一种样式,以便浏览器在元素在页面上打开之前查找该样式(根据进入动画的需要)。
@starting-style
规则是四项用于实现流畅进入和退出动画的新 CSS 功能中介绍的功能之一。
Beta 版浏览器
通过浏览器 Beta 版,您可以预览下一个稳定版浏览器中将推出的内容。在该版本面向全球发布之前,您可以先测试可能会影响您网站的新功能或移除的功能。新 Beta 版为 Firefox 127 和 Chrome 126。这些版本为该平台带来了许多出色的功能。如需了解所有详情,请参阅版本说明。下面仅列举了其中的几个亮点。
Chrome 126 针对同一源导航包含跨文档视图转换。 以前,您必须将网站重构为 SPA,才能使用 View Transitions API。现在,情况不再如此。现在,系统默认为同源导航启用视图转换。您可以在同源的两个不同文档之间创建视图转换。
Firefox 127 包含其他 JavaScript Set 方法:intersection()
、union()
、difference()
、symmetricDifference()
、isSubsetOf()
、isSupersetOf()
和 isDisjointFrom()
。