Nuevo en la plataforma web en junio

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

Rachel Andrew

Versiones estables del navegador

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 conjunto. Los siguientes métodos de configuración ahora están disponibles en Firefox 127 y forman parte de Baseline Newly Available:

• intersection()
• union()
• difference()
• symmetricDifference()
• isSubsetOf()
• isSupersetOf()
• isDisjointFrom()

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.

Interpolación de colores en gradientes de CSS

Los degradados 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);
}

Transiciones de vista entre documentos

Anteriormente, tenías que volver a crear la arquitectura de tu sitio web en 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 vista entre dos documentos diferentes del mismo origen.

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

@view-transition {
  navigation: auto;
}

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

La extensión trigger-rumble de la API de Gamepad

Chrome 126 extiende la interfaz GamepadHapticActuator para exponer la función trigger-rumble en la Web para gamepads compatibles. Esta extensión permitirá que las aplicaciones web que aprovechen la API de Gamepad también vibren los activadores de los dispositivos de gamepad 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 funciones nuevas o eliminaciones que podrían afectar tu sitio antes de que el público general obtenga esa versión. 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 está disponible como línea de base nueva. Usa @property para definir un type y establecer un valor de resguardo para las propiedades personalizadas de CSS.