5 月新增 Web 平台

了解 2024 年 5 月期间在稳定版和 Beta 版网络浏览器中推出的一些有趣功能。

2024 年 5 月,Firefox 126Safari 17.5Chrome 125 已稳定发布。本文将介绍 Web 平台中新增的功能。

Chrome 125 包含 CSS 锚点定位。这样,您就可以在不使用 JavaScript 的情况下,以声明方式将绝对定位的元素锚定到网页上的一个或多个其他元素(锚点)。当锚点可滚动时,锚点定位功能的效果会非常出色。一个常见的用例是将弹出式窗口(例如提示)放置在调用它的元素旁边,或者放置在选择菜单及其弹出式窗口选项列表旁边。

如需了解详情,请参阅CSS 锚点定位 API 简介

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

CSS 分级值函数 - round()mod()rem()

Chrome 125 还包含分级值函数,这意味着这些函数现在处于“新推出的基准”状态。分级值函数 round()mod()rem() 都会根据另一个“步长值”转换给定值。

如需了解详情,请参阅 CSS 分级值数学函数现已纳入基准版 2024

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: 118.
  • Safari: 15.4.

Source

light-dark() 函数

加入“新推出的基准”的还有 CSS 颜色函数 light-dark(),该函数在 Safari 17.5 中提供。

light-dark() 是一个接受两个参数的函数,这两个参数都必须是 <color>。系统会根据所使用的配色方案选择其中一种。

  • 如果使用的配色方案为 light 或未知,则会返回第一个值的计算值。
  • 如果使用的配色方案为 dark,则返回第二种颜色的计算值。

如需了解详情,请参阅使用 light-dark() 实现的 CSS 配色方案依赖颜色

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

Screen Wake Lock API

Firefox 126 中推出了 Screen Wake Lock API,这是“新推出的基准”中新增的另一项功能。此 API 提供了一种防止设备调暗屏幕和锁定屏幕的方法。

如需了解如何使用此功能,请参阅使用 Screen Wake Lock API 保持唤醒状态

Browser Support

  • Chrome: 84.
  • Edge: 84.
  • Firefox: 126.
  • Safari: 16.4.

Source

Compute Pressure API

Compute Pressure API 提供表示系统 CPU 负载的概要状态。它允许实现使用正确的基础硬件指标,以确保只要系统未处于不可管理的压力下,用户就可以充分利用可用的所有处理能力。

此功能在 Chrome 125 中提供。Intel 负责了此 API 的设计和实现工作,这将让视频会议应用能够动态平衡功能和性能。

阅读 Compute Pressure API 文档

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

@starting-style 规则

Safari 17.5 包含 @starting-style 规则。借助此 CSS at-rule,您可以应用一种样式,以便浏览器在元素在页面上打开之前查找该样式(根据进入动画的需要)。

@starting-style 规则是四项用于实现流畅进入和退出动画的新 CSS 功能中介绍的功能之一。

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

Beta 版浏览器

通过浏览器 Beta 版,您可以预览下一个稳定版浏览器中将推出的内容。在该版本面向全球发布之前,您可以先测试可能会影响您网站的新功能或移除的功能。新 Beta 版为 Firefox 127Chrome 126。这些版本为该平台带来了许多出色的功能。如需了解所有详情,请参阅版本说明。下面仅列举了其中的几个亮点。

Chrome 126 针对同一源导航包含跨文档视图转换。 以前,您必须将网站重构为 SPA,才能使用 View Transitions API。现在,情况不再如此。现在,系统默认为同源导航启用视图转换。您可以在同源的两个不同文档之间创建视图转换。

Firefox 127 包含其他 JavaScript Set 方法:intersection()union()difference()symmetricDifference()isSubsetOf()isSupersetOf()isDisjointFrom()