探索 2024 年 5 月在稳定版和 Beta 版网络浏览器中推出的一些有趣的功能。
浏览器稳定版
2024 年 5 月，Firefox 126、Safari 17.5 和 Chrome 125 成为稳定版。这篇博文介绍了 Web 平台中新增的功能。
CSS 锚点定位
Chrome 125 包含 CSS 锚点定位功能。这样，您无需使用 JavaScript 即可以声明方式将绝对定位的元素绑定到网页上的一个或多个其他元素（锚点）。当锚点可滚动时，锚点定位可以高效地工作。一种常见的使用情形是放置弹出式窗口，例如在调用该窗口的元素旁边显示提示，或者放置选择菜单及其弹出式窗口选项列表。
如需了解详情，请参阅 CSS Anchor Positioning API 简介。
CSS 阶梯值函数 - round()、mod() 和 rem()
Chrome 125 还包含阶梯值函数，这意味着这些函数现在是新版基准。阶梯值函数 round()、mod() 和 rem() 都会根据另一个“步长值”转换给定值。
如需了解详情，请参阅 CSS 阶梯值数学函数现已纳入 Baseline 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 现已纳入新发布的 Baseline。此 API 提供了一种防止设备调暗和锁定屏幕的方法。
如需了解如何使用此功能，请参阅使用 Screen Wake Lock API 不锁定屏幕。
Compute Pressure API
Compute Pressure API 可提供表示系统 CPU 负载的概要状态。它允许实现使用正确的底层硬件指标，以确保用户能够利用所有可用的处理能力，前提是系统不会处于无法控制的压力之下。
Chrome 125 中提供了此功能。Intel 主导了该 API 的设计和实现工作，该 API 可让视频会议应用动态平衡功能和性能。
@starting-style 规则
Safari 17.5 包含 @starting-style 规则。借助此 CSS @ 规则，您可以根据条目动画的需要，应用一种样式，浏览器可以在元素在网页上打开之前查询到该样式。
@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()。