Descubre algunas de las funciones interesantes que se incorporaron a los navegadores web estables y beta durante marzo de 2024.
Versiones del navegador estable
En marzo de 2024, Firefox 124, Safari 17.4 y Chrome 123 se volvieron estables. En esta publicación, se analizan las nuevas funciones que se agregaron a la plataforma web.
Adapta los esquemas de colores con light-dark()
La función de color light-dark() llegó a Chrome 123 y facilita la adaptación de los esquemas de colores a las preferencias del usuario.
En el siguiente ejemplo, color-scheme se configura como light dark en root.
Las propiedades personalizadas usan la función de color light-dark() para establecer los colores que se alternarán según la preferencia del usuario de modo oscuro o claro.
:root {
color-scheme: light dark;
--primary-color: light-dark(#333, #fafafa);
--primary-background: light-dark(#e4e4e4, #121212);
--highlight-color: light-dark(hotpink, lime);
}
Encuentra más ejemplos y detalles en colores que dependen de color-scheme de CSS con light-dark()
Mejor control de las entradas con field-sizing
También en Chrome 123, la propiedad field-sizing permite el crecimiento automático de los campos de entrada de texto.
Navegadores compatibles
- 123
- x
- x
- x
Kerning para puntuación CJK con text-spacing-trim
En Chrome 123, la propiedad text-spacing-trim aplica interlineado a los caracteres de puntuación chinos, japoneses y coreanos (CJK) para ajustar el espaciado excesivo.
Obtén más información en Presentamos cuatro nuevas funciones internacionales para CSS.
Navegadores compatibles
- 123
- x
- x
- x
La regla-at de CSS @scope
Safari 17.4 incluye @scope, lo que te permite seleccionar elementos en subárboles del DOM específicos, segmentar elementos con precisión sin escribir selectores demasiado específicos que sean difíciles de anular y sin acoplar los selectores demasiado a la estructura del DOM.
Obtén más información en
Limita el alcance de tus selectores con la regla at @scope de CSS
Mejoras de pantalla en pantalla
Chrome 123 incluye dos funciones para mejorar las experiencias de pantalla en pantalla.
La primera es el modo de visualización
de CSS picture-in-picture.
Esto te permite escribir reglas de CSS específicas que solo se aplican cuando (parte de ella) la app web se muestra en el modo de pantalla en pantalla.
La segunda función te permite usar opener.focus desde una ventana de pantalla en pantalla de un documento para llevar el enfoque del sistema a la pestaña que posee la ventana de pantalla en pantalla del documento.
Esto te permite regresar la pestaña original al primer plano cuando sea necesario. Por ejemplo, cuando el usuario necesita acceder a una experiencia de IU que no cabe en la ventana de pantalla en pantalla más pequeña.
Compatibilidad con align-content en el diseño de tablas y bloques
Chrome 123 y Safari 17.4 incluyen compatibilidad con align-content en el diseño de tablas y bloques. Obtén más información sobre el cambio en la compatibilidad con align-content.
API de enrutamiento estático de Service Worker
A partir de Chrome 123, está disponible la API de enrutamiento estático de Service Worker. Esta API te permite indicar declarativamente cómo se deben recuperar ciertas rutas de recursos, lo que significa que el navegador no necesita ejecutar un service worker solo para recuperar respuestas de una caché o directamente de la red.
Obtén más información en Cómo usar la API de enrutamiento estático de service worker para omitir el service worker en rutas específicas.
API de Long Animation Frames
Chrome 123 también incluye la API de Long Animation Frames, que es una actualización de la API de Long Tasks para proporcionar una mejor comprensión de las actualizaciones lentas de la interfaz de usuario (IU). Esto puede ser útil para identificar fotogramas de animación lentos que probablemente afecten la métrica de métricas web esenciales Interaction to Next Paint (INP), que mide la capacidad de respuesta, o para identificar otros bloqueos de IU que afectan la fluidez.
Navegadores compatibles
- 123
- x
- x
- x
La propiedad content-visibility
Firefox 124 incluye compatibilidad con la propiedad content-visibility de CSS.
Esta propiedad controla si un elemento renderiza su contenido, lo que permite que los navegadores omitan la renderización de contenido hasta que sea necesario.
Adiciones a ArrayBuffer y la agrupación de arrays
En Safari 17.4, JavaScript obtiene algunas funciones nuevas compatibles con la propiedad detached y los métodos transfer() y transferToFixedLength() de ArrayBuffer.
Safari 17.4 también incluye los métodos de agrupación de arrays Object.groupBy y Map.groupBy. Para obtener más información sobre la agrupación de arrays, consulta JavaScript obtiene métodos de agrupación de arrays.
Estas funciones ahora son interoperables y, por lo tanto, se unen a Baseline Newly disponible.
setHTMLUnsafe y parseHTMLUnsafe
Los métodos setHTMLUnsafe y parseHTMLUnsafe que se envían en Safari 17.4 permiten el uso del Shadow DOM declarativo desde JavaScript.
Estos métodos también ofrecen una forma más fácil de analizar HTML de forma imperativa en DOM, en comparación con innerHTML o DOMParser.
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 125 y Chrome 124. 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.
Firefox 125 será una actualización emocionante.
Incluye align-content en los bloques, lo que hace que esta función sea interoperable.
También se incluye la API de Popover (y, por lo tanto, forma parte de Baseline Newly disponible). También se admitirá la propiedad transition-behavior.
Popover y transition-behavior son parte de Interoperabilidad 2024.
Chrome 124 incluye los métodos setHTMLUnsafe y parseHTMLUnsafe para permitir que se use el Shadow DOM declarativo desde JavaScript, lo que hace que estas funciones sean interoperables. También se incluye la API de WebSocketStream y el atributo writingsuggestions.