Descubre algunas de las funciones interesantes que llegaron en los navegadores web estables y beta en junio de 2024.
Versiones del navegador estable
En junio de 2024, se estabilizaron Firefox 127 y Chrome 126. En esta publicación, se analizan las nuevas funciones que se agregaron a la plataforma web.
Métodos 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 pasaron a formar parte de Baseline Newly Disponible:
intersection()union()difference()symmetricDifference()isSubsetOf()isSupersetOf()isDisjointFrom()
Para obtener más información, consulta Los métodos de conjunto de JavaScript ahora forman parte de Baseline.
API de Async Clipboard
La API del portapapeles 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 del portapapeles en Cómo desbloquear el acceso al portapapeles.
Interpolación de color 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 hace que sea 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
- 111
- 111
- 127
- 16.2
Transiciones de vista entre documentos
Anteriormente, tenías que rediseñar tu sitio web a una SPA para usar la API de View Transitions. Sin embargo, ya no es así. A partir de Chrome 126, las transiciones de vistas ahora están habilitadas de forma predeterminada para las navegaciones del mismo origen. 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 arroba @view-transition y establece el descriptor de navegación en auto.
@view-transition {
navigation: auto;
}
Consulta la documentación sobre las transiciones de vistas 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 ofrecen una vista previa de los elementos que estarán disponibles 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 versiones beta nuevas son Firefox 128, Chrome 127, Safari 18 y Safari 17.6. Estos lanzamientos traen muchas funciones excelentes a la plataforma. Consulta las notas de la versión para conocer todos los detalles. Estos son solo algunos de los aspectos destacados.
Safari 17.6 es una versión de correcciones para las funciones existentes. Safari 18 tiene una serie de funciones nuevas y emocionantes, como consultas de contenedores de estilo, la API de transición de vistas para apps de una sola página y compatibilidad con la palabra clave safe en propiedades de Flexbox.
Chrome 127 incluye la propiedad font-size-adjust de CSS, 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.