Descubre algunas de las funciones interesantes que se lanzaron en los navegadores web estables y beta durante mayo de 2024.
Versiones estables del navegador
En mayo de 2024, Firefox 126, Safari 17.5 y Chrome 125 se volvieron estables. En esta publicación, se analizan las nuevas funciones que se agregaron a la plataforma web.
Posicionamiento de anclaje de CSS
Chrome 125 incluye el posicionamiento de anclaje de CSS. Esto te permite vincular un elemento con posición absoluta a uno o más elementos de la página (los anclajes) de forma declarativa, sin usar JavaScript. El posicionamiento de los anuncios fijos funciona de manera eficiente cuando se pueden desplazar. Un caso de uso común es posicionar un cuadro emergente, como un cuadro de información, junto al elemento que lo invocó, o un menú de selección y su lista de opciones de cuadro emergente.
Obtén más información en Presentamos la API de posicionamiento de anclas de CSS.
Funciones de valor escalonado de CSS: round()
, mod()
y rem()
mod()
y rem()
Chrome 125 también incluye las funciones de valor escalonado, lo que significa que estas funciones ahora están disponibles en el modelo de referencia. Las funciones de valor escalonado, round()
, mod()
y rem()
, transforman un valor determinado según otro "valor de paso".
Obtén más información en Las funciones matemáticas de valor escalonado de CSS ahora están en el modelo de referencia de 2024.
La función light-dark()
También se une a la función de color CSS light-dark()
, que se encuentra en Safari 17.5.
light-dark()
es una función que acepta dos argumentos, ambos de los cuales deben ser <color>
. Se elige uno de los dos según el esquema de colores que se use.
- Si el esquema de colores utilizado es
light
o es desconocido, se muestra el valor calculado del primer valor. - Si el esquema de colores utilizado es
dark
, se muestra el valor calculado del segundo color.
Obtén más información en Colores dependientes del esquema de colores de CSS con light-dark() .
La API de Screen Wake Lock
En Firefox 126, se incluye la API de Screen Wake Lock, otra función que ahora forma parte de Baseline Newly Available. Esta API proporciona una forma de evitar que el dispositivo atenúe y bloquee la pantalla.
Obtén información para usar esta función en Cómo mantener la pantalla activa con la API de Screen Wake Lock.
La API de Compute Pressure
La API de Compute Pressure ofrece estados de alto nivel que representan la carga de la CPU en el sistema. Permite que la implementación use las métricas de hardware subyacentes correctas para garantizar que los usuarios puedan aprovechar toda la potencia de procesamiento disponible, siempre y cuando el sistema no esté bajo una tensión inmanejable.
Esta función está disponible en Chrome 125. Intel lideró el trabajo de diseño e implementación de esta API, que permitirá que las apps de videoconferencia equilibren de forma dinámica las funciones y el rendimiento.
Consulta la documentación de la API de Compute Pressure.
La regla @starting-style
Safari 17.5 incluye la regla @starting-style
. Esta regla de at de CSS te permite aplicar un estilo que el navegador puede buscar antes de que el elemento esté abierto en la página, según sea necesario para las animaciones de entrada.
La regla @starting-style
es una de las funciones que se abordan en Cuatro nuevas funciones de CSS para animaciones de entrada y salida fluidas.
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 resto del mundo obtenga esa versión. Las nuevas versiones beta son Firefox 127 y Chrome 126. Estas versiones ofrecen muchas funciones excelentes a la plataforma. Consulta las notas de la versión para obtener todos los detalles. Estos son solo algunos aspectos destacados.
Chrome 126 incluye transiciones de vista entre documentos para las navegaciones de origen único. 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í. Las transiciones de vista ahora están habilitadas de forma predeterminada para las navegaciones del mismo origen. Puedes crear una transición de vista entre dos documentos diferentes que tengan el mismo origen.
Firefox 127 incluye métodos adicionales de Set de JavaScript: intersection()
, union()
, difference()
, symmetricDifference()
,isSubsetOf()
, isSupersetOf()
y isDisjointFrom()
.