以下是您有必要知道的信息:
- View Transitions API 新支持跨文档转换。
- CloseWatcher API 再次可用。
- Gamepad API 现在包含 trigger-rumble 功能。
- 还有许多更多内容。
我是 Adriana Jara。我们来深入了解一下 Chrome 126 会为开发者带来哪些新变化。
同源导航的跨文档视图转换
借助 View Transitions API,您可以在不同视图之间创建无缝的视觉过渡,现在它默认用于同源导航。以前,它仅适用于单页应用架构。
如需实现跨文档视图过渡,两端都需要选择启用。为此,请使用 view-transition @ 规则,并将导航描述符设置为 auto。
跨文档视图转换使用与同一文档视图转换相同的构建块和原则。
@view-transition {
navigation: auto;
}
请访问使用 View Transition API 实现平滑过渡了解详情,还有更多示例。
已重新启用 CloseWatcher API
对于 <dialog>
和 popover=""
元素,CloseWatcher API 可让您更轻松地处理关闭请求,例如桌面平台上的 ESC 键或 Android 上的返回手势。
此功能最初包含在 Chrome 120 中,后来由于与 dialog 元素发生意外交互而被停用。我们已在 Chrome 126 中进行了改进,以便最大限度地减少之前出现的问题,因此已重新启用该功能。
如需了解如何使用 CloseWatcher,请访问其演示。
Gamepad API Trigger-rumble 扩展程序
触发器 Rumble 功能现已纳入 Gamepad API。它可为兼容的控制器增强网页版中的游戏体验。
trigger-rumble
扩展了 GamepadHapticActuator
,该接口表示控制器中用于向用户提供触感反馈的硬件(如果有)。trigger-rumble
可让使用 Gamepad API 的 Web 应用也振动这些游戏手柄设备的触发器。
使用以下代码,您可以检查浏览器是否支持该功能以及触发方式(双关语意料意味)trigger-rumble
// This assumes a `Gamepad` as the value of the `gamepad` variable.
const triggerRumble = (gamepad, delay = 0, duration = 100, weak = 1.0, strong = 1.0) => {
if (!('vibrationActuator' in gamepad)) {
return;
}
// Feature detection.
if (!('effects' in gamepad.vibrationActuator) || !gamepad.vibrationActuator.effects.includes('trigger-rumble')) {
return;
}
gamepad.vibrationActuator.playEffect('trigger-rumble', {
// Duration in ms.
duration: duration,
// The left trigger (between 0 and 1).
leftTrigger: leftTrigger,
// The right trigger (between 0 and 1).
rightTrigger: rightTrigger,
});
};
如需详细了解如何充分利用 Gamepad API,请查看使用游戏手柄玩 Chrome 恐龙游戏。
还有更多其他奖励!
当然还有很多。
GeolocationCoordinates
和GeolocationPosition
现在包含.toJSON()
方法。在 DevTools 更新中,您可以在 Application > Storage 部分中的专用树中检查存储分区。
ChromeOS 现在支持适用于 Web 应用的标签页式模式。
深入阅读
这里仅介绍一些重要的亮点。如需了解 Chrome 126 中的其他变化,请点击以下链接。
订阅
如需随时了解最新动态,请订阅 Chrome Developers YouTube 频道,每当我们发布新视频时,您都会收到电子邮件通知。
嗨,Adriana Jara。Chrome 127 发布之后,我会在这里告诉大家 Chrome 的新变化!