Nuevo en la plataforma web en enero

Descubre algunas de las funciones interesantes que se incorporaron a los navegadores web estables y beta durante enero de 2024.

Rachel Andrew

Versiones del navegador estable

En enero de 2024, Firefox 122, Chrome 121 y Safari 17.3 se volvieron estables. En esta publicación, se analizan las nuevas funciones que se agregaron a la plataforma web.

<hr> en <select>

Firefox 122 agrega elementos <hr> como un elemento secundario permitido de elementos <select>. Esto ayuda a facilitar la lectura de listas seleccionadas con muchas opciones. Todos los motores principales de navegadores ahora admiten esta función. Sin embargo, cabe señalar que, actualmente, ningún navegador expone <hr> al árbol de accesibilidad.

HTMLSelectElement.showPicker

Además, en el caso de los elementos <select> en Firefox, es el método showPicker() para HTMLSelectElement. Este es el mismo selector que se mostraría normalmente cuando se selecciona el elemento, pero se puede activar cuando el usuario presiona un botón o realiza otra interacción.

API de Largest Contentful Paint (LCP)

Firefox 122 también es compatible con la API de LCP. Esta API de rendimiento proporciona información sobre el tiempo sobre la imagen o la pintura de texto más grandes antes de que los usuarios interactúen con una página web. Obtén más información sobre el LCP en la documentación de LCP.

Propiedades de la barra de desplazamiento de CSS

Chrome 121 agrega compatibilidad con las propiedades scrollbar-color y scrollbar-width de la barra de desplazamiento. Obtén más información al respecto en el artículo Estilo de la barra de desplazamiento.

Animación font-palette de CSS

La propiedad font-palette te permite seleccionar una paleta específica para renderizar una fuente de color. Esta propiedad ahora admite animación, por lo que cambiar entre paletas se convierte en una transición suave entre las dos paletas seleccionadas.

Los métodos transfer() y transferToFixedLength() de ArrayBuffer

Firefox incluye los métodos transfer() y transferToFixedLength() de JavaScript de ArrayBuffer. El método transfer() crea una ArrayBuffer nueva con el mismo contenido de bytes que la ArrayBuffer actual y, luego, desconecta la ArrayBuffer original. El método transferToFixedLength() funciona de la misma manera, pero crea un ArrayBuffer de tamaño fijo.

Actualizaciones de la API de Speculation Rules

Los sitios usan la API de Speculation Rules para indicarle a Chrome de manera programática qué páginas debe renderizar previamente, lo que crea una mejor experiencia del usuario gracias a la reducción del tiempo de navegación de las páginas.

Chrome 121 admite reglas de documentos, que son una extensión de la sintaxis de reglas de especulación que permite al navegador obtener la lista de URLs para la carga especulativa de elementos de una página. Las reglas de los documentos pueden incluir criterios para determinar cuál de estos vínculos puede utilizarse. Esto, junto con un nuevo campo "eagerness", te permite precargar automáticamente o renderizar previamente los vínculos en las páginas de forma inmediata, colocando el cursor sobre el anuncio o con el mouse hacia abajo.

Versiones del navegador Beta

Las versiones del navegador beta te ofrecen una vista previa de los elementos que estarán en la próxima versión estable del navegador. Es un buen momento para probar funciones nuevas, o eliminaciones, que podrían afectar a tu sitio antes de que el mundo la implemente. Las nuevas versiones beta son Firefox 123, Chrome 122 y Safari 17.4. Estos lanzamientos aportan muchas funciones increíbles a la plataforma. Consulta las notas de la versión para obtener todos los detalles. Estos son algunos aspectos destacados.

Firefox 123 beta incluye el Shadow DOM declarativo.

Además, Firefox 123 admite el código de estado de la respuesta de información HTTP 103 Early Hints para la precarga de los recursos que la página puede necesitar mientras el servidor prepara la respuesta completa.

Hay muchas cosas buenas en Safari 17.4 beta. En el caso de CSS, se admite @scope, align-content en contenedores de bloques y celdas de tablas, y con los seudoelementos ::grammar-error y ::spelling-error, además de mucho más.

En los formularios, compatibilidad con el modo de escritura vertical en los controles de formularios, el método showPicker() para <input type="date"> y compatibilidad con <hr> dentro de <select> en iOS.

JavaScript también obtiene algunas funciones nuevas compatibles con los métodos detached(), transfer() y transferToFixedLength() de ArrayBuffer, entre otras funciones.

Chrome 122 beta incluye una opción unsanitized en el método read() de la API de Async Clipboard para recuperar el formato HTML no limpio. En el caso de JavaScript, hay nuevos asistentes de iterador y métodos nuevos para la clase Set integrada.

También en Chrome 122 se encuentra la API de Storage Buckets, que tiene como objetivo hacer que la expulsión de almacenamiento persistente bajo una alta presión de memoria sea más predecible.