Novedades de Chrome 126

Tenga en cuenta lo siguiente:

Soy Adriana Jara. Analicemos las novedades para desarrolladores en Chrome 126.

Transiciones de vista entre documentos para navegaciones de mismo origen

La API de View Transitions te permite crear transiciones visuales sin inconvenientes entre diferentes vistas y ahora está disponible de forma predeterminada para las navegaciones de origen. Anteriormente, solo estaba disponible para arquitecturas de aplicaciones de una sola página.

Para implementar una transición de vista entre documentos, se debe habilitar en ambos extremos. Para ello, usa la regla arroba de transición de vistas y establece el descriptor de navegación en automático.

Las transiciones de vista entre documentos usan los mismos elementos básicos y principios que las transiciones de vista del mismo documento.

@view-transition {
  navigation: auto;
}

Consulta Transiciones fluidas con la API de transición de vistas para obtener más detalles. Las muestras son más.

Se volvió a habilitar la API de CloseWatcher

En el caso de los elementos <dialog> y popover="", la API de CloseWatcher facilita el control de las solicitudes de cierre, como la tecla ESC en plataformas de computadoras de escritorio o el gesto de atrás en Android.

Esta función se envió originalmente en Chrome 120, pero se inhabilitó debido a una interacción inesperada con el elemento de diálogo. Se volvió a habilitar en Chrome 126 después de realizar mejoras para minimizar los problemas anteriores.

Para aprender a usar CloseWatcher, visita su demostración.

Extensión de Gamepad API trigger-rumble

La función de disparador de ruido ahora forma parte de la API de Gamepad. Mejora la experiencia de juego en la Web para los controles compatibles.

trigger-rumble extiende GamepadHapticActuator, que es una interfaz que representa el hardware en el controlador diseñado para proporcionar retroalimentación táctil al usuario (si está disponible). trigger-rumble permite que las aplicaciones web que usan la API de Gamepad también vibren los activadores de esos dispositivos.

Con el siguiente código, puedes verificar si la funcionalidad es compatible con el navegador y cómo activarla (juego de palabras).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,
  });
};

Consulta Cómo jugar al juego del dinosaurio de Chrome con tu control de juegos para obtener más información y aprovechar al máximo la API de Gamepad.

Y mucho más.

Por supuesto, hay mucho más.

Lee las notas de la versión completas.

Lecturas adicionales

Esto solo abarca algunos aspectos clave. Consulta los siguientes vínculos para conocer más cambios en Chrome 126.

Suscribirse

Para mantenerte al tanto, suscríbete al canal de YouTube de Chrome Developers y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Yo soy Adriana Jara. Apenas se lance Chrome 127, estaré aquí para contarte las novedades de Chrome.