Nuevo en la plataforma web en febrero

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

Fecha de publicación: 28 de febrero de 2025

Versiones estables del navegador

En febrero de 2025, Firefox 135 y Chrome 133 se volvieron estables. En esta publicación, se analizan las nuevas funciones que se agregaron a la plataforma web.

Cómo verificar las capacidades de WebAuthn

Firefox 135 y Chrome 133 agregan compatibilidad con el método estático PublicKeyCredential.getClientCapabilities(). Esto te permite verificar si un navegador admite funciones de la API de Web Authentication sin necesidad de recurrir al espionaje de navegadores.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 135.
  • Safari: 17.4.

Source

Firefox 135 también incluye funciones del análisis de JSON con propuesta de fuente: el argumento context del parámetro reviver JSON.parse, JSON.isRawJSON() y JSON.rawJSON().

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 135.
  • Safari: not supported.

Source

Es el valor de sugerencia del atributo popover.

Chrome 133 agrega un tercer valor para el atributo popover, popover="hint". Las sugerencias, que suelen asociarse con comportamientos de tipo "ventana de información", tienen comportamientos ligeramente diferentes. Ahora es posible abrir un cuadro emergente de sugerencias no relacionado mientras se mantiene abierta una pila existente de cuadros emergentes automáticos.

El ejemplo canónico es que se abre un selector <select> (popover="auto") y se muestra un cuadro de información (popover="hint") activado por el desplazamiento del mouse. Esa acción no cierra el selector <select>.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Obtén más información en Popup = sugerencia.

Función attr() avanzada de CSS

Hay una buena colección de incorporaciones de CSS en Chrome 133. Esta versión de Chrome incluye la ampliación a attr() especificada en el nivel 5 de CSS, que permite tipos además de <string> y su uso en todas las propiedades de CSS (además de la compatibilidad existente con el contenido de pseudoelementos).

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Obtén más información en CSS attr() recibe una actualización.

Consultas de contenedores de estado de desplazamiento de CSS

También en Chrome 133, usa consultas de contenedor para aplicar diseño a los elementos secundarios de los contenedores según su estado de desplazamiento.

El contenedor de consulta es un contenedor de desplazamiento o un elemento afectado por la posición de desplazamiento de un contenedor de desplazamiento. Se pueden consultar los siguientes estados:

  • stuck: Un contenedor con posición fija se pega a uno de los bordes del cuadro de desplazamiento.
  • snapped: Un contenedor alineado con el ajuste del desplazamiento se ajusta horizontal o verticalmente.
  • scrollable: Indica si se puede desplazar un contenedor de desplazamiento en una dirección consultada.

También hay un valor nuevo para container-type: scroll-state, que permite consultar contenedores.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

Para obtener más información, lee scroll-state() de CSS.

CSS text-box, text-box-trim y text-box-edge

También en CSS para Chrome 133, se encuentran las propiedades text-box-trim y text-box-edge, junto con la propiedad de abreviatura text-box, que permiten un control más preciso de la alineación vertical del texto.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

Obtén más información sobre el funcionamiento de esta propiedad útil en text-box-trim de CSS.

Movimiento que conserva el estado del DOM

Chrome 133 agrega una primitiva de DOM (Node.prototype.moveBefore) que te permite mover elementos alrededor de un árbol de DOM sin restablecer el estado del elemento.

Cuando se mueve en lugar de quitar y agregar, se conserva el siguiente estado:

  • Quedan cargados <iframe> elementos.
  • El elemento activo permanece enfocado.
  • Los diálogos emergentes, de pantalla completa y modales permanecen abiertos.
  • Las transiciones y animaciones de CSS continúan.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

La interfaz de FileSystemObserver

La interfaz FileSystemObserver que se agregó en Chrome 133 notifica a los sitios web los cambios en el sistema de archivos. Los sitios observan los cambios en los archivos y directorios a los que el usuario les otorgó permiso anteriormente, en su dispositivo local o en el sistema de archivos de Bucket (también conocido como sistema de archivos privados de Origin), y reciben notificaciones sobre información básica de los cambios, como el tipo de cambio.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: not supported.

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 136, Safari 18.4 y Chrome 134. 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.

La versión beta más reciente de Safari incluye una gran lista de incorporaciones y mejoras, incluidas algunas funciones que esperamos que se conviertan en Baseline Newly available una vez que este navegador sea estable. Por ejemplo, writing-mode: sideways-rl y writing-mode: sideways-lr, el método estático supports() para ClipboardItem y una lista completa de elementos de la propuesta de ayudantes de iteradores.

Tanto la versión beta de Safari 18.4 como la de Firefox 136 incluyen la API de Cookie Store, que debería estar disponible en Baseline New una vez que se envíen ambos navegadores.

Firefox 136 incluye las pseudoclases :open y :has-slotted, esta última también está en Chrome 134. También incluye Intl.DurationFormat, que debería estar disponible como Baseline Newly.

Chrome 134 incluye elementos <select> personalizables, la propiedad dynamic-range-limit de CSS y la funcionalidad de descarte claro para elementos <dialog>.