6 月新增 Web 平台

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

Rachel Andrew

稳定版浏览器

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

JavaScript Set 方法

集是任何编程语言中必不可少的数据结构。现在，您可以使用 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 128、Chrome 127、Safari 18 和 Safari 17.6。这些版本为该平台带来了许多出色的功能。如需了解所有详情，请参阅版本说明。下面仅列举了其中的几个亮点。

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

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

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