New in Chrome 126

Adriana Jara

Here's what you need to know:

Cross-document transitions are newly supported in the View Transitions API.
The CloseWatcher API is available once again.
The Gamepad API now includes trigger-rumble.
And there's plenty more.

I'm Adriana Jara. Let's dive in and see what's new for developers in Chrome 126.

Cross-document view transitions for same-origin navigations

The View Transitions API gives you the power to create seamless visual transitions between different views and now it is available by default for same-origin navigations. Previously it was only available for single page application architectures.

To implement a cross-document view transition, both ends need to opt-in. To do this, use the view-transition at-rule and set the navigation descriptor to auto.

Cross-document view transitions use the same building blocks and principles as same-document view transitions.

@view-transition {
  navigation: auto;
}

Visit Smooth transitions with the View Transition API for details, samples are more.

CloseWatcher API re-enabled

For <dialog> and popover="" elements, the CloseWatcher API makes it easier to handle close requests, like the ESC key on desktop platforms or the back gesture on Android.

This feature was originally shipped in Chrome 120, but was disabled because of an unexpected interaction with the dialog element. It has been re enabled in Chrome 126 after improvements to minimize the previous problems.

To learn how to use CloseWatcher visit its demo.

Gamepad API trigger-rumble extension

The trigger-rumble capability is now part of the Gamepad API. It enhances gaming experiences on the web for compatible controllers.

trigger-rumble extends the GamepadHapticActuator, which is an interface that represents hardware in the controller designed to provide haptic feedback to the user (if available). trigger-rumble allows web applications that use the Gamepad API to also vibrate the triggers of those gamepad devices.

With the following code you can check if the functionality is supported in the browser and how to trigger— pun intended —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,
  });
};

Check out Play the Chrome dino game with your gamepad for more information to make the most of the Gamepad API.

And more!

Of course there's plenty more.

GeolocationCoordinates and GeolocationPosition now include a .toJSON() method.
In DevTools updates, you can inspect storage buckets in a dedicated tree in the Application > Storage section.
ChromeOS now supports tabbed mode for web apps.

Read the full release notes.

New in Chrome 126

Cross-document view transitions for same-origin navigations

CloseWatcher API re-enabled

Gamepad API trigger-rumble extension

And more!

Further reading

Subscribe