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 del navegador estable

En septiembre de 2024, Firefox 130 Safari 18 y Chrome 129 se volvió estable. 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)

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.

Navegadores compatibles

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

Origen

La función calc-size() de CSS es similar a calc(), pero también admite operaciones con exactamente una palabra clave admitida. Las palabras clave de tamaño admitidas son auto, min-content, max-content y fit-content

Navegadores compatibles

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

Origen

Más información en Animación de altura: automática; (y otras palabras clave de tamaño intrínseco) en CSS.

Formatea duraciones en JavaScript

También en Chrome 129 es Intl.DurationFormat, que proporciona un método de formato y la duración, por ejemplo, "1 hr 40 min 30 sec", 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 cumple hacer que Baseline esté disponible recientemente, ya que todavía no es compatible con Firefox para Android Sin embargo, la asistencia nocturna de Firefox para Android también es compatible.

Navegadores compatibles

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

Origen

Consultas de estilo CSS para propiedades personalizadas

Safari 18 es compatible con varias funciones nuevas, incluidas las consultas de estilo de CSS. Las consultas de estilo proporcionan una forma de crear estilos reutilizables y aplicarlos como grupo. por ejemplo, cuando tiene 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.

Transiciones de vista del mismo 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 nuevas funciones o que podrían afectar a tu sitio antes de que el mundo reciba ese lanzamiento. Nuevo las 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 asistentes para iteradores de JavaScript y Se habilitó la opción Cookies con estado particionado independiente (CHIPS).

Chrome 130 incluye compatibilidad con box-decoration-break: clone tanto para intercalados fragmentación (diseño de línea) y fragmentación de bloques (fragmentos creados para impresión y multicol). 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.