Descubre algunas de las funciones interesantes que llegaron a los navegadores web estables y beta durante septiembre de 2024.
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
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.
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
.
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.
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.
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.
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.
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.