Nuevo en la plataforma web en junio

Descubre algunas de las funciones interesantes que se lanzaron en navegadores web estables y beta durante junio de 2024.

En junio de 2024, Firefox 127 y Chrome 126 se volvieron estables. En esta publicación, se analizan las nuevas funciones que se agregaron a la plataforma web.

Métodos de Set de JavaScript

Los conjuntos son una estructura de datos esencial en cualquier lenguaje de programación. Ahora puedes usar los métodos integrados de JavaScript para realizar operaciones de conjuntos. Los siguientes métodos de configuración ahora están disponibles en Firefox 127 y forman parte de Baseline Newly Available:

Navegadores compatibles

  • Chrome: 122.
  • Edge: 122.
  • Firefox: 127.
  • Safari: 17.

Origen

Para obtener más información, consulta Los métodos Set de JavaScript ahora forman parte del modelo de referencia.

API de Async Clipboard

La API de Clipboard ahora es totalmente compatible con Firefox 127. Firefox ahora admite la interfaz ClipboardItem, junto con los métodos read() y write() de la interfaz del Portapapeles. Obtén más información sobre la API de Clipboard en Cómo desbloquear el acceso al portapapeles.

Navegadores compatibles

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 127.
  • Safari: 13.1.

Origen

Interpolación de colores en gradientes de CSS

Los gradientes de CSS se especifican para aceptar un <color-interpolation-method>, y esto ahora es compatible con Firefox, lo que lo hace interoperable en todos los motores principales. Ahora, por ejemplo, puedes especificar un linear-gradient() con el sistema de colores hsl y una interpolación más larga.

.longer {
 
background: linear-gradient(90deg in hsl longer hue, red, blue);
}

Navegadores compatibles

  • Chrome: 111.
  • Edge: 111
  • Firefox: 127.
  • Safari: 16.2.

Transiciones de vista entre documentos

Anteriormente, tenías que volver a crear la arquitectura de tu sitio web como un SPA para usar la API de View Transitions. Sin embargo, ya no es así. A partir de Chrome 126, las transiciones de vista ahora están habilitadas de forma predeterminada para las navegaciones de origen único. Puedes crear una transición de vistas entre dos documentos del mismo origen diferentes.

Para habilitar una transición de vista entre documentos, se debe habilitar la opción en ambos extremos. Para ello, usa la regla de @view-transition y establece el descriptor de navegación en auto.

@view-transition {
 
navigation: auto;
}

Navegadores compatibles

  • Chrome: 126.
  • Edge: 126.
  • Firefox: No es compatible.
  • Versión preliminar de tecnología de Safari: Compatible.

Obtén más información en la documentación sobre las transiciones de vista entre documentos.

Extensión trigger-rumble de la API de Gamepad

Chrome 126 extiende la interfaz GamepadHapticActuator para exponer la capacidad trigger-rumble en la Web para controles de juegos compatibles. Esta extensión permitirá que las aplicaciones web que aprovechan la API de Gamepad también hagan vibrar los activadores de los dispositivos de controles de juegos que vienen equipados con esta funcionalidad.

Versiones beta del navegador

Las versiones beta del navegador te brindan una vista previa de lo que estará disponible en la próxima versión estable del navegador. Es un buen momento para probar nuevas funciones, o eliminaciones, que podrían afectar tu sitio antes de que todo el mundo reciba ese lanzamiento. Las nuevas versiones beta son Firefox 128, Chrome 127, Safari 18 y Safari 17.6. Estas versiones ofrecen muchas funciones excelentes a la plataforma. Consulta las notas de la versión para conocer todos los detalles. Estos son solo algunos aspectos destacados.

Safari 17.6 es una versión con correcciones de funciones existentes. Safari 18 tiene varias funciones nuevas interesantes, como consultas de contenedor de diseño, la API de transición de vista para apps de una sola página y compatibilidad con la palabra clave safe en propiedades de flexbox.

Chrome 127 incluye la propiedad CSS font-size-adjust, la capacidad de especificar texto alternativo en el contenido generado como una cantidad arbitraria de elementos y la capacidad de agregar información de capítulos individuales en MediaMetaData.

Firefox 128 incluye propiedades y valores de CSS, por lo que esta función Baseline ahora está disponible. Usa @property para definir un type y establecer un valor de resguardo para las propiedades personalizadas de CSS.