6 月新增 Web 平台

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

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

集是任何编程语言中必不可少的数据结构。现在,您可以使用 JavaScript 的内置方法执行集合运算。以下 set 方法现已在 Firefox 127 中推出,并已成为“新推出的基准”的一部分:

浏览器支持

  • Chrome:122.
  • Edge:122.
  • Firefox:127.
  • Safari:17.

来源

如需了解详情,请参阅 JavaScript Set 方法现已纳入基准

Async Clipboard API

从 Firefox 127 开始,剪贴板 API 已获得全面支持。Firefox 现在支持 ClipboardItem 接口以及剪贴板接口的 read()write() 方法。如需详细了解 Clipboard API,请参阅解除阻止剪贴板权限

浏览器支持

  • Chrome:76.
  • Edge:79。
  • Firefox:127.
  • Safari:13.1。

来源

CSS 渐变中的颜色插值

CSS 渐变色已指定接受 <color-interpolation-method>,Firefox 现在也支持此功能,这使得其可在所有主要引擎中互操作。例如,您现在可以使用 hsl 颜色系统和更长的插值来指定 linear-gradient()

.longer {
  background: linear-gradient(90deg in hsl longer hue, red, blue);
}

浏览器支持

  • Chrome:111.
  • Edge:111.
  • Firefox:127.
  • Safari:16.2。

跨文档视图转换

以前,您必须将网站重构为 SPA,才能使用 View Transitions API。现在,情况不再如此。从 Chrome 126 开始,对于同源导航,视图转换现在默认处于启用状态。您可以在两个不同的同源文档之间创建视图转换。

如需启用跨文档视图转换,需要同时在发起端和接收端选择启用。为此,请使用 @view-transition at-rule 并将导航描述符设置为 auto

@view-transition {
  navigation: auto;
}

浏览器支持

  • Chrome:126.
  • Edge:126。
  • Firefox:不受支持。
  • Safari Technology Preview:受支持。

如需了解详情,请参阅跨文档视图转换文档。

Gamepad API trigger-rumble 扩展程序

Chrome 126 扩展了 GamepadHapticActuator 接口,以便在网络上公开 trigger-rumble 功能,以供兼容的游戏手柄使用。借助此扩展程序,利用 Gamepad API 的 Web 应用还可以振动配备此功能的游戏手柄设备的扳机。

Beta 版浏览器

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

Safari 17.6 修复了现有功能的问题。Safari 18 提供了许多令人兴奋的新功能,包括样式容器查询、适用于单页面应用的视图转换 API,以及对 flexbox 属性中的 safe 关键字的支持。

Chrome 127 包含 font-size-adjust CSS 属性,可将生成内容的替换文本指定为任意数量的元素,还可在 MediaMetaData 中添加单个章节信息

Firefox 128 包含 CSS 属性和值,因此此功能处于“新推出的基准”状态。使用 @property 定义 type,并为 CSS 自定义属性设置回退值。