Nuevo en la plataforma web en junio

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

Rachel Andrew

Publicado el 30 de junio de 2026

Versiones estables del navegador

Chrome 149, Chrome 150 y Firefox 152 se lanzaron en la versión estable durante junio. Este mes no hubo lanzamientos de Safari estable. En esta publicación, se analizan las nuevas funciones que se lanzarán en los navegadores web.

El tamaño de los controles de formulario con field-sizing se convierte en Baseline

Firefox 152 introduce compatibilidad con la propiedad field-sizing de CSS, lo que hace que el tamaño automático de los controles de formulario esté disponible en todos los motores de navegadores principales.

La propiedad field-sizing permite que los controles de formulario, como <textarea>, <input> y <select>, se contraigan o expandan de forma dinámica para adaptarse a su contenido (field-sizing: content) en lugar de permanecer fijos en un tamaño predeterminado (field-sizing: fixed). Esto elimina la necesidad de soluciones alternativas de JavaScript cuando se compilan entradas de texto o áreas de texto que cambian de tamaño a medida que los usuarios escriben.

textarea {
  field-sizing: content;
}

Las formas básicas rect() y xywh() en shape-outside se convierten en Baseline

Con el envío de la compatibilidad de Chrome 149 con las funciones de forma rect() y xywh() en la propiedad shape-outside, estas formas básicas ahora están disponibles en Baseline en los principales navegadores.

Las funciones rect() y xywh() te permiten definir áreas de exclusión rectangulares de números de punto flotante con coordenadas de inserción exactas o sintaxis de origen y dimensiones. Esto ofrece una sintaxis más simple y legible que usar polygon() para formas de ajuste flotante rectangulares.

Ajuste de escala automático de fuentes con CSS text-fit

Chrome 150 introduce la propiedad text-fit de CSS, que permite a los desarrolladores escalar automáticamente los tamaños de fuente para que se ajusten al ancho de una caja contenedora.

.headline {
  text-fit: grow;
}

Decoraciones de separación de CSS

Chrome 149 incluye compatibilidad con las decoraciones de separación de CSS en diseños de cuadrícula y Flexbox. Las decoraciones de brechas te permiten agregar líneas y aplicar estilos directamente al espacio entre los elementos de cuadrícula y flexibles, de manera similar a column-rule en los diseños de varias columnas.

.grid-container {
  display: grid;
  gap: 20px;
  column-rule: 2px solid red;
  row-rule: 1px dashed gray;
}

Obtén más información en Gap decorations: Now in Chromium.

CSS background-clip: border-area

Chrome 150 agrega compatibilidad con background-clip: border-area de CSS Backgrounds Level 4.

Este valor recorta los fondos de los elementos específicamente en el área del borde, lo que te permite crear bordes de degradado personalizados, bordes decorativos y efectos de borde animados sin necesidad de elementos de ajuste o seudoelementos adicionales.

Promesas de desplazamiento programáticas

Chrome 150 actualiza los métodos de desplazamiento programático (scrollTo(), scrollBy() y scrollIntoView()) para que devuelvan una promesa.

La promesa devuelta se resuelve cuando finaliza la animación de desplazamiento fluido, lo que proporciona un indicador confiable para activar acciones de seguimiento una vez que se detiene el desplazamiento.

Navegación con el teclado declarativa con focusgroup

Chrome 150 introduce la compatibilidad con el atributo focusgroup.

El atributo focusgroup permite que los desarrolladores administren de forma declarativa la navegación con las teclas de flecha en los controles de la IU compuestos (como barras de herramientas, listas de pestañas y menús) sin tener que escribir manualmente los objetos de escucha de eventos de teclado.

<div focusgroup="toolbar wrap" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
</div>

Obtén más información en el Explicador de Focusgroup.

Compatibilidad con WebSockets en la memoria caché atrás/adelante (bfcache)

En Chrome 149, las páginas con conexiones WebSocket activas ahora pueden ingresar a la memoria caché atrás/adelante (bfcache).

Anteriormente, una conexión WebSocket abierta hacía que una página no fuera apta para el almacenamiento en caché atrás/adelante. Ahora, el navegador cierra automáticamente las conexiones de WebSocket activas cuando se ingresa a la bfcache, lo que permite que la página se almacene en caché y se restablezca de inmediato cuando se vuelve a ella.

Tiempos de respuesta de encabezado y provisionales en Resource Timing

Firefox 152 agrega compatibilidad con firstInterimResponseStart y finalResponseHeadersStart en la interfaz PerformanceResourceTiming.

Se pueden usar para medir cuánto tiempo tarda el navegador en recibir respuestas HTTP provisionales y la respuesta HTTP final después de enviar una solicitud, respectivamente.

Botones de acción para las notificaciones

Firefox 152 agrega compatibilidad con los botones de acción de notificaciones a través de la propiedad actions en Notification y las opciones en ServiceWorkerRegistration.showNotification().

Ahora puedes incluir botones de acción en las notificaciones del SO y detectar las interacciones del usuario cuando se presionan los botones.

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 Firefox 153 y Safari 27.

La versión beta de Firefox 153 introduce compatibilidad con Error.stackTraceLimit para configurar la profundidad máxima del seguimiento de pila capturado, IDBObjectStore.getAllRecords() y IDBIndex.getAllRecords() para recuperar registros indexados, y RTCDtlsTransport.getRemoteCertificates() para la inspección de seguridad de WebRTC. Los desarrolladores de complementos también obtienen una nueva API de publicSuffix y un método de userScripts.execute() para la inserción de secuencias de comandos a pedido.

La versión beta de Safari 27 introduce el posicionamiento de anclaje que tiene en cuenta las transformaciones, la pseudoclase :heading para hacer coincidir los elementos de encabezado, la palabra clave revert-rule para revertir las capas en cascada, la compatibilidad con la palabra clave stretch en el tamaño de la caja y los selectores compuestos :host:has().