Nouveautés de Chrome 126

Voici les informations à retenir :

Je m'appelle Adriana Jara. Entrons dans le vif du sujet et découvrons les nouveautés de Chrome 126 pour les développeurs.

Transitions de vue entre documents pour les navigations de même origine

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

Pour implémenter une transition de vue entre documents, les deux parties doivent l'activer. Pour ce faire, utilisez la règle de transition d'affichage et définissez le descripteur de navigation sur automatique.

Les transitions de vues entre documents utilisent 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, consultez Transitions fluides avec l'API View Transition pour en savoir plus.

API CloseWatcher réactivée

Pour les éléments <dialog> et popover="", l'API CloseWatcher facilite la gestion des requêtes de fermeture. comme la touche ÉCHAP sur les plateformes de bureau ou le geste Retour sur Android.

Initialement disponible dans Chrome 120, cette fonctionnalité 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 afin de minimiser les problèmes précédents.

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

Extension trigger-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 pour les manettes compatibles.

trigger-rumble étend GamepadHapticActuator, une interface qui représente le matériel de la manette conçu 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 prise en charge dans le navigateur et comment la déclencher (jeu de mots intentionnel) :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,
  });
};

Consultez l'article Jouer au jeu du dinosaure de Chrome avec votre manette de jeu pour savoir comment exploiter tout le potentiel de l'API Gamepad.

Et bien plus !

Bien sûr, il y en a bien d'autres.

Lisez les notes de version complètes.

Documentation complémentaire

Cela ne couvre que certains points clés. Consultez les liens suivants pour modifications supplémentaires dans Chrome 126.

S'abonner

Pour vous tenir informé, abonnez-vous à la Chaîne YouTube des développeurs Chrome, et vous recevrez une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Bonjour Adriana Jara. Dès la sortie de Chrome 127, je serai là pour vous présenter les nouveautés de Chrome.