Descubre algunas de las funciones interesantes que se incorporaron a los navegadores web estables y beta durante mayo de 2024.
Versiones del navegador estable
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 las anclas CSS
Chrome 125 incluye posicionamiento de anclajes de CSS. Esto te permite anclar un elemento en una posición absoluta a uno o más elementos de la página (los anuncios fijos) de forma declarativa y sin usar JavaScript. El posicionamiento de los anclas funciona de forma eficaz cuando estos son desplazables. Un caso de uso común es posicionar una ventana emergente, como un cuadro de información junto al elemento que la invocó o un menú de selección y su lista de opciones de ventanas emergentes.
Obtén más información en Introducción a la API de posicionamiento de anclas de CSS.
Funciones de valores escalonados de CSS: round(), mod() y rem()
Chrome 125 también incluye las funciones de valores escalonados, lo que significa que estas funciones ahora están disponibles en Baseline recientemente. Las funciones de valor escalonado, round(), mod() y rem(), transforman un valor dado de acuerdo con otro "valor del paso".
Obtén más información en Las funciones matemáticas de valor escalonado de CSS ahora están en Baseline 2024.
La función light-dark()
Además, se usa la función de color de CSS light-dark(), que está en Safari 17.5, para unir el modelo de referencia que se acaba de ofrecer.
light-dark() es una función que acepta dos argumentos, que deben ser <color>. Uno de ambos se elige según el esquema de colores utilizado.
- Si el esquema de colores utilizado es
lighto 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 sobre los colores que dependen del esquema de colores de CSS con claro y oscuro() .
La API de Screen Wake Lock
En Firefox 126, se usa la API de Screen Wake Lock, otra función que ahora forma parte de Baseline recientemente disponible. Esta API proporciona una forma de evitar que el dispositivo atenúe y bloquee la pantalla.
Descubre cómo usar esta función en Mantente activo con la API de Screen Wake Lock Lock.
La API de Compute Pressure
La API de presión de procesamiento 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 para ellos, siempre y cuando el sistema no esté bajo un estrés inmanejable.
Esta función está en Chrome 125. Intel lideró el trabajo de diseño e implementación de esta API, lo que permitirá que las apps de videoconferencias equilibran dinámicamente las funciones y el rendimiento.
Lee la documentación de la API de Compute Pressure.
La regla @starting-style
Safari 17.5 incluye la regla @starting-style. Esta regla-at de CSS te permite aplicar un estilo que el navegador puede buscar antes de que el elemento se abra en la página, según sea necesario para las animaciones de entrada.
La regla @starting-style es una de las funciones que se tratan en Cuatro nuevas funciones de CSS para animaciones de entrada y salida fluidas.
Versiones del navegador Beta
Las versiones del navegador beta te ofrecen una vista previa de los elementos que estarán en la próxima versión estable del navegador. Es un buen momento para probar funciones nuevas, o eliminaciones, que podrían afectar a tu sitio antes de que el mundo la implemente. Las nuevas versiones beta son Firefox 127 y Chrome 126. Estos lanzamientos aportan muchas funciones increíbles a la plataforma. Consulta las notas de la versión para obtener todos los detalles. Estos son algunos aspectos destacados.
Chrome 126 incluye transiciones de vistas entre documentos para las navegaciones del mismo origen. Anteriormente, debías rediseñar tu sitio web a una SPA para usar la API de View Transitions. Sin embargo, ya no es así. 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 diferentes que sean del mismo origen.
Firefox 127 incluye métodos adicionales del conjunto de JavaScript: intersection(), union(), difference(), symmetricDifference(), isSubsetOf(), isSupersetOf() y isDisjointFrom().