Usuarios nuevos de la plataforma web en marzo

Descubre algunas de las funciones interesantes que llegaron a los navegadores web estables y beta durante marzo de 2024.

Rachel Andrew

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() se lanzó en 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 colores que se alternarán según la preferencia de modo oscuro o claro del usuario.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

Obtén más ejemplos y detalles en Colores dependientes de color-scheme del CSS con light-dark()

Navegadores compatibles

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Origen

Mejor control de las entradas con field-sizing

También en Chrome 123, la propiedad field-sizing habilita los campos de entrada de texto que se expanden automáticamente.

Navegadores compatibles

  • Chrome: 123
  • Edge: 123.
  • Firefox: No es compatible.
  • Safari: No se admite.

Origen

Espacio para la puntuación CJK con text-spacing-trim

En Chrome 123, la propiedad text-spacing-trim aplica el espacio entre letras a los caracteres de puntuación chinos, coreanos y japoneses (CJK) para ajustar el espaciado excesivo. Obtén más información en Presentamos cuatro nuevas funciones internacionales para CSS.

Navegadores compatibles

  • Chrome: 123.
  • Edge: 123.
  • Firefox: No es compatible.
  • Safari: No se admite.

Origen

La regla at @scope de CSS

Safari 17.4 incluye @scope, que te permite seleccionar elementos en subárboles DOM específicos, segmentar elementos con precisión sin escribir selectores demasiado específicos que sean difíciles de anular y sin vincular tus selectores demasiado estrechamente a la estructura del DOM.

Obtén más información en Limita el alcance de tus selectores con la regla at-rule @scope de CSS

Navegadores compatibles

  • Chrome: 118.
  • Edge: 118.
  • Firefox: Detrás de una marca.
  • Safari: 17.4.

Origen

Mejoras de pantalla en pantalla

Chrome 123 incluye dos funciones para mejorar las experiencias de la función pantalla en pantalla. El primero es el modo de visualización picture-in-picture de CSS. Esto te permite escribir reglas de CSS específicas que solo se aplican cuando la app web (o parte de ella) 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 enfocar a nivel del sistema la pestaña propietaria de la ventana de pantalla en pantalla del documento.

Esto te permite volver a poner la pestaña original en primer plano cuando sea necesario. Por ejemplo, cuando el usuario necesita acceder a una experiencia de IU que no se ajusta a la ventana de pantalla en pantalla más pequeña.

Compatibilidad con align-content en el diseño de bloques y tablas

Chrome 123 y Safari 17.4 incluyen compatibilidad con align-content en el diseño de bloques y tablas. Obtén información sobre el cambio a la compatibilidad con align-content.

API de enrutamiento estático de Service Worker

A partir de Chrome 123, la API de enrutamiento estático de Service Worker está disponible. Esta API te permite declarar de forma declarativa 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 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 la IU que afectan la fluidez.

Navegadores compatibles

  • Chrome: 123.
  • Edge: 123.
  • Firefox: No es compatible.
  • Safari: No se admite.

Origen

La propiedad content-visibility

Firefox 124 incluye compatibilidad con la propiedad CSS content-visibility. Esta propiedad controla si un elemento renderiza su contenido, lo que permite que los navegadores omitan la renderización del contenido hasta que sea necesario.

Navegadores compatibles

  • Chrome: 85.
  • Borde: 85.
  • Firefox: 125.
  • Safari: 18.

Origen

Se agregaron elementos a ArrayBuffer y a 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.

Navegadores compatibles

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 122.
  • Safari: 17.4.

Origen

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, lee JavaScript obtiene métodos de agrupación de arrays.

Navegadores compatibles

  • Chrome: 117
  • Edge: 117
  • Firefox: 119.
  • Safari: 17.4.

Origen

Estas funciones ahora son interoperables y, por lo tanto, se unen a la función Baseline Newly Available.

setHTMLUnsafe y parseHTMLUnsafe

Los métodos setHTMLUnsafe y parseHTMLUnsafe que se envían en Safari 17.4 permiten que se use el DOM secundario declarativo desde JavaScript. Estos métodos también ofrecen una forma más fácil de analizar de forma imperativa el HTML en el DOM, en comparación con innerHTML o DOMParser.

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 125 y Chrome 124. 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.

Firefox 125 promete ser una versión emocionante. Incluye align-content en bloques, lo que hace que esta función sea interoperable. También se incluye la API de Popover, que forma parte de Baseline Newly Available. También se admitirá la propiedad transition-behavior. Popover y transition-behavior son parte de Interop 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.