Nouveautés de Chrome 126

Voici les informations à retenir :

Je m'appelle Adriana Jara. Découvrons ensemble les nouveautés pour les développeurs dans Chrome 126.

Transitions d'affichage de plusieurs documents pour les navigations à la même origine

L'API View Transitions vous permet de créer des transitions visuelles fluides entre différentes vues. Elle est désormais disponible par défaut pour les navigations à la même origine. Auparavant, il n'était disponible que pour les architectures d'applications monopages.

Pour implémenter une transition d'affichage de plusieurs documents, l'utilisateur doit l'activer aux deux parties. Pour ce faire, utilisez l'élément "view-transition at-rule" dans la règle et définissez le descripteur de navigation sur "auto".

Les transitions de vue d'un document à l'autre reposent sur les mêmes éléments de base et principes que les transitions de vue d'un même document.

@view-transition {
  navigation: auto;
}

Pour en savoir plus et obtenir des exemples, consultez Transitions fluides avec l'API View Transition.

API CloseWatcher réactivée

Pour les éléments <dialog> et popover="", l'API CloseWatcher facilite la gestion des requêtes de fermeture, telles que la touche Échap sur les plates-formes de bureau ou le geste Retour sur Android.

Cette fonctionnalité a été initialement fournie dans Chrome 120, mais elle a été désactivée en raison d'une interaction inattendue avec l'élément de boîte de dialogue. Elle a été réactivée dans Chrome 126 après des améliorations visant à minimiser les problèmes précédents.

Pour apprendre à utiliser CloseWatcher, consultez sa démonstration.

Extension déclencheur-rumble de l'API Gamepad

La fonctionnalité de déclencheur-rumble fait désormais partie de l'API Gamepad. Elle améliore l'expérience de jeu sur le Web avec les manettes compatibles.

trigger-rumble étend GamepadHapticActuator, une interface qui représente le matériel de la manette conçue pour fournir un retour haptique à l'utilisateur (le cas échéant). trigger-rumble permet aux applications Web qui utilisent l'API Gamepad de faire vibrer les déclencheurs de ces manettes de jeu.

Le code suivant vous permet de vérifier si la fonctionnalité est compatible avec le navigateur et de savoir comment le déclencher (jeu de mots prévu).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,
  });
};

Pour savoir comment exploiter tout le potentiel de l'API Gamepad, consultez Jouer au jeu du dinosaure de Chrome avec votre manette de jeu.

Et plus encore

Bien sûr, ce n’est pas tout.

Lire les notes de version complètes

Complément d'informations

Nous n'aborderons ici que certains points clés. Consultez les liens suivants pour obtenir des modifications supplémentaires dans Chrome 126.

S'abonner

Pour ne rien manquer, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera lancée.

Adriana Jara, soja, et dès la sortie de Chrome 127, je serai là pour vous faire part des nouveautés de Chrome.