前端新鲜事 —— 六月的 Web 新特性

429 阅读3分钟

稳定版浏览器

2024 年 6 月,Firefox 127 和 Chrome 126 变为稳定版本。这篇博文介绍了 Web 平台中新增的功能。

注意:这些博文中包含从 MDN 提取的浏览器兼容性数据,而且可能尚未针对最新的浏览器版本进行更新。该博文会在 browser-compat-data 版本 中立即显示正确信息。

JavaScript Set 方法

在任何编程语言中,Set 都是必不可少的数据结构。现在,你可以使用 JavaScript 的内置方法执行 Set 的一些操作。以下 Set 的方法现已从 Firefox 127 提供,并已纳入 Baseline NewAvailable 计划的一部分:

浏览器支持

image.png

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

Async Clipboard API

Firefox 127 现在完全支持剪贴板 API。Firefox 现在支持 ClipboardItem 接口,以及剪贴板接口的 read() 和 write() 方法。如需详细了解 Clipboard API,请参阅 取消屏蔽剪贴板访问

浏览器支持

image.png

CSS 渐变中的颜色插值

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

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

浏览器支持

image.png

跨文档视图转换

以前,您必须将网站重新设计为 SPA,才能使用 View Transitions API

现在,情况不再如此。从 Chrome 126 开始,现在会为同源导航默认启用视图转换。您可以在两个同源文档之间创建视图过渡。

如需启用跨文档视图过渡,两端都需要选择启用。 为此,请使用 @view-transition,并将导航描述符设置为 auto

@view-transition {
  navigation: auto;
}

浏览器支持

image.png

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

Gamepad API trigger-rumble 扩展程序

Chrome 126 扩展了 GamepadHapticActuator 接口,以在网络上为兼容的游戏手柄提供 trigger-rumble 功能。此扩展程序允许利用 Gamepad API 的 Web 应用同时振动配备此功能的游戏手柄设备的触发器。

浏览器测试版

Beta 版浏览器可让您预览下一个稳定版本中的功能。这时有必要在面向所有用户发布新版本之前测试可能会影响您的网站的新功能(或内容移除情况)。新的 Beta 版为 Firefox 128Chrome 127Safari 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 自定义属性设置后备值。