Nuevo uso de la plataforma web en septiembre

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

Rachel Andrew

Versiones estables del navegador

En septiembre de 2024, Firefox 130, Safari 18 y Chrome 129 se volvieron estables. En esta publicación, se analizan las nuevas funciones que se agregaron a la plataforma web.

Acordeones exclusivos con el atributo name para <details>

Firefox 130 admite el atributo name del elemento <details>. Esto agrupa los elementos <details>, en los que solo se puede abrir un elemento dentro de un grupo a la vez. Esto te permite crear un acordeón exclusivo sin usar JavaScript.

Navegadores compatibles

  • Chrome: 120
  • Edge: 120
  • Firefox: 130.
  • Safari: 17.2.

Cómo convertir elementos en automáticos (y más)

En Chrome 129, se agrega la propiedad interpolate-size y la función calc-size() de CSS.

La propiedad interpolate-size de CSS permite que una página habilite animaciones y transiciones de palabras clave de tamaño intrínseco de CSS, como auto, min-content y fit-content, en los casos en que esas palabras clave se puedan animar.

Navegadores compatibles

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

Origen

La función calc-size() de CSS es similar a calc(). Sin embargo, también admite operaciones en una sola palabra clave de tamaño admitida. Los keywords de tamaño admitidos son auto, min-content, max-content y fit-content.

Navegadores compatibles

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

Origen

Obtén más información en Anima a altura: auto; (y otras palabras clave de tamaño intrínseco) en CSS.

Formatea duraciones en JavaScript

También en Chrome 129, se incluye Intl.DurationFormat, que proporciona un método para dar formato a las duraciones, por ejemplo, "1 hora, 40 minutos y 30 segundos", que admite varias configuraciones regionales.

Navegadores compatibles

  • Chrome: 129.
  • Edge: 129.
  • Firefox: No es compatible.
  • Safari: 16.4.

Origen

API de WebCodecs

La API de Web Codecs ahora es compatible con computadoras de escritorio en Firefox 130, lo que les brinda a los desarrolladores web acceso de bajo nivel a los fotogramas individuales de una transmisión de video y a los fragmentos de audio. Las interfaces nuevas incluyen: VideoEncoder, VideoDecoder, EncodedVideoChunk, VideoFrame y VideoColorSpace. Esta API no hace que Baseline esté disponible como versión nueva, ya que aún no es compatible con Firefox para Android. Sin embargo, hay compatibilidad con Firefox Nightly para Android.

Navegadores compatibles

  • Chrome: 94.
  • Borde: 94.
  • Firefox: 130.
  • Safari: 16.4.

Origen

Consultas de estilo CSS para propiedades personalizadas

Safari 18 admite varias funciones nuevas, incluidas las consultas de estilo CSS. Las consultas de estilo proporcionan una forma de crear estilos reutilizables y aplicarlos como un grupo. por ejemplo, cuando tienes un componente reutilizable con múltiples variantes.

Navegadores compatibles

  • Chrome: 111.
  • Edge: 111.
  • Firefox: No es compatible.
  • Safari: 18.

Origen

Obtén más información sobre las consultas de estilo de CSS.

Misma transición de vista de documento

Safari 18 también admite las mismas transiciones de vista de documentos para SPA, lo que te permite crear transiciones visuales entre los diferentes estados de una app.

Navegadores compatibles

  • Chrome: 111
  • Edge: 111.
  • Firefox: No es compatible.
  • Safari: 18.

Origen

Obtén más información sobre las transiciones de vista del mismo documento

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 131, Chrome 130 y Safari 18.1. 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.

Firefox 131 incluye nuevos ayudantes de iterador de JavaScript y ahora se habilitó Cookies con estado particionado independiente (CHIPS).

Chrome 130 incluye compatibilidad con box-decoration-break: clone para la fragmentación intercalada (diseño de línea) y la fragmentación de bloques (fragmentos creados para la impresión y el formato multicolumna). También hay mejores informes de errores en IndexedDB y un nuevo atributo connected para la interfaz SerialPort de serie web.

Safari 18.1 es una versión con correcciones de errores en funciones existentes.