Nuevo en la plataforma web en mayo

Descubre algunas de las funciones interesantes que se lanzaron en los navegadores web estables y beta durante mayo de 2026.

Rachel Andrew

Publicado: 29 de mayo de 2026

Versiones estables del navegador

En mayo, se lanzaron las versiones estables de Chrome 148, Firefox 151 y Safari 26.5. En esta publicación, se analizan las numerosas funciones nuevas de este mes.

La pseudoclase :open de CSS se convierte en Baseline

Safari 26.5 es, principalmente, una versión con correcciones para las funciones existentes. Sin embargo, también incluye compatibilidad con la seudoclase :open, lo que hace que esta función esté disponible en Baseline Newly.

La seudoclase :open te permite aplicar un diseño a los elementos que tienen estados "abierto" y "cerrado" cuando están abiertos. Esto se aplica a elementos como <details> y <dialog> cuando están abiertos, así como a los elementos <select> y <input> (como los selectores de color o de fecha) cuando se muestran sus interfaces de selector. Esto proporciona una alternativa semántica más clara al diseño con atributos como details[open].

Las consultas de contenedores solo con nombre de CSS se convierten en Baseline

Con el lanzamiento de Chrome 148 este mes, las consultas de contenedores solo por nombre ahora están disponibles en Baseline Newly.

Anteriormente, cuando escribías una consulta de contenedor, debías especificar una condición de consulta de tamaño o estilo junto con el nombre del contenedor, y establecer el tipo del contenedor con la propiedad container-type. Ahora puedes consultar la presencia de un contenedor con nombre solo por su nombre, sin ninguna condición adicional. Además, ya no es necesario que establezcas un container-type en el elemento superior si solo realizas consultas por nombre:

#container {
  container-name: --sidebar;
}

@container --sidebar {
  .content {
    padding: 2rem;
  }
}

Las consultas de diseño de contenedores para propiedades personalizadas se convierten en Baseline

Firefox 151 introduce compatibilidad con las consultas de style() en @container, lo que hace que las consultas de estilo de contenedor para propiedades personalizadas estén disponibles como Baseline Newly.

Las consultas de diseño del contenedor te permiten aplicar diseños a los elementos en función de las propiedades de CSS de un contenedor principal. Si bien las consultas de tamaño son extremadamente potentes, las consultas de estilo te permiten consultar funciones que no son de tamaño. En particular, esta versión incluye compatibilidad total entre navegadores para consultar propiedades personalizadas. Por ejemplo, puedes verificar si una propiedad personalizada --theme está establecida en dark en un contenedor principal:

@container style(--theme: dark) {
  .card {
    background-color: #1a1a1a;
    color: #fff;
  }
}

Carga diferida para elementos de audio y video

Chrome 148 introduce la carga diferida nativa para los elementos <video> y <audio> con el atributo loading="lazy".

Al igual que con los elementos <img> y <iframe>, ahora puedes indicarle al navegador que retrase la carga de los recursos multimedia hasta que estén cerca del viewport. Esto ayuda a mejorar el rendimiento de carga de la página, ahorrar ancho de banda y reducir el uso de datos para tus usuarios. Obtén más información del equipo que implementó esta función en How To Use Standard HTML Video and Audio Lazy-Loading on the Web Today.

La API de Document Picture-in-Picture

Firefox 151 introduce compatibilidad con la API de Document Picture-in-Picture en plataformas de escritorio.

A diferencia de la API de Picture-in-Picture estándar, que te permite ver un elemento <video> en una ventana siempre visible, la API de Document Picture-in-Picture te permite abrir una ventana siempre visible que contiene contenido HTML arbitrario. Esto permite superposiciones interactivas enriquecidas, como cuadrículas de participantes de videoconferencias, tickers bursátiles interactivos o temporizadores que persisten incluso cuando se navega fuera de la página.

La API de Web Serial expande la compatibilidad con la plataforma

Firefox 151 agrega compatibilidad con la API de Web Serial en plataformas de escritorio, y Chrome 148 agrega compatibilidad con ella en Android.

La API de Web Serial proporciona una forma para que los sitios web lean y escriban en dispositivos seriales, por ejemplo, microcontroladores, impresoras 3D, placas de desarrollo y hardware periférico. En Firefox, el uso de la API de Web Serial requiere que los usuarios instalen un complemento de permiso del sitio generado de forma sintética, lo que garantiza un mecanismo seguro y controlado para administrar el acceso.

Versiones beta del navegador

Las versiones beta del navegador te brindan una vista previa de las funciones de la próxima versión estable del navegador. Es un buen momento para probar las funciones nuevas o las eliminaciones que podrían afectar tu sitio antes de que se lance la versión para todo el mundo. Las nuevas versiones beta de este mes son Chrome 149 y Firefox 152. Este mes no hay versión beta de Safari.

La versión beta de Chrome 149 incluye actualizaciones interesantes de CSS, como las decoraciones de espacios de CSS, que te permiten aplicar estilo al espacio en blanco (espacios) entre los elementos flexibles y de cuadrícula. También admite path() y shape(), así como las funciones de forma básicas rect() y xywh() en la propiedad shape-outside, y path-length como propiedad CSS. En el lado de la API, los métodos de desplazamiento programático, como scrollTo(), scrollBy() y scrollIntoView(), ahora devuelven promesas que se resuelven cuando se completa el desplazamiento suave, y las páginas con conexiones WebSocket activas ahora pueden calificar para el almacenamiento en caché de atrás y adelante (BFCache).

La versión beta de Firefox 152 introduce compatibilidad total con la propiedad field-sizing, que permite que los controles de formulario ajusten automáticamente su tamaño para adaptarse a su contenido. También agrega las propiedades actions y maxActions a la interfaz Notification, y compatibilidad con options.pseudoElement en Element.getAnimations().