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.

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.

Browser Support

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

Animación automática (y mucho más)

Chrome 129 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.

Browser Support

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

Source

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

Browser Support

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

Source

Obtén más información en Animate to height: auto; (and other intrinsic sizing keywords) in 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.

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox Technology Preview: supported.
  • Safari: 16.4.

Source

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.

Browser Support

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

Source

Consultas de diseño CSS para propiedades personalizadas

Safari 18 admite varias funciones nuevas, incluidas las consultas de diseño 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 varias variaciones.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

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.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

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 resto del mundo 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.