Publicado el 3 de junio de 2026
A menos que se indique lo contrario, los siguientes cambios se aplican a la versión más reciente del canal beta de Chrome para Android, ChromeOS, Linux, macOS y Windows. Obtén más información sobre las funciones que se indican aquí a través de los vínculos proporcionados o de la lista en ChromeStatus.com. Chrome está en versión beta desde el 2 de junio de 2026. Puedes descargar la versión más reciente en Google.com para computadoras o en Google Play Store para Android.
CSS y la IU
Colores del sistema AccentColor y AccentColorText
Los colores del sistema AccentColor y AccentColorText se pueden usar en CSS para acceder al color de los elementos destacados del sistema especificado en el dispositivo del usuario. Esta capacidad permite a los desarrolladores aplicar un diseño similar al de una app a su contenido web en contextos en los que los usuarios esperan la integración del tema del sistema operativo, como una aplicación web instalada. Los usuarios deben estar en una aplicación web instalada en el perfil inicial para ver el color de los elementos destacados del sistema renderizado.
Permite un parámetro de redondeo opcional para polygon()
Te permite especificar un parámetro opcional de redondeo de esquinas en la función de forma polygon() de CSS. Los desarrolladores pueden especificar un valor de longitud para redondear las esquinas de los polígonos sin calcular manualmente las curvas de Bézier.
Zoom animable
La propiedad zoom de CSS se puede animar y se interpola como un <number>. Los desarrolladores pueden hacer transiciones y animar el zoom para ajustar sin problemas los elementos y su diseño, lo que complementa el ajuste basado en transformaciones existente.
Modificadores de solicitudes de URL de CSS
Las funciones url() de CSS aceptan modificadores de solicitudes opcionales después de la cadena de URL entre comillas: cross-origin(), integrity() y referrer-policy(). Estos modificadores controlan el comportamiento de recuperación del recurso al que se hace referencia directamente desde CSS, sin necesidad de cambiar el lenguaje de marcado HTML ni JavaScript.
Por ejemplo, background-image: url("image.png" cross-origin(anonymous)) recupera la imagen con el modo anónimo de CORS.
Propiedad text-fit de CSS
Ajusta el tamaño de fuente de los nodos de texto para que se ajusten perfectamente al ancho de su caja contenedora.
Esta propiedad permite que los desarrolladores se aseguren de que los títulos o el contenido dinámico llenen el espacio horizontal disponible sin cálculos manuales del tamaño de la fuente ni soluciones complejas de JavaScript. Esta propiedad proporciona una solución sólida y nativa de CSS para la tipografía adaptable que mantiene la alineación visual en diferentes tamaños de pantalla y longitudes de texto variables.
CSS background-clip: border-area
Implementa el valor border-area para la propiedad background-clip de CSS, como se define en CSS Backgrounds Level 4. El valor background-clip recorta el fondo de un elemento en el área pintada por los trazos de su borde, teniendo en cuenta border-width y border-style, y, al mismo tiempo, ignorando la transparencia de border-color. Este valor te permite crear bordes de gradiente sin border-image.
Función image(<color>) de CSS
La función image() permite a los desarrolladores generar una imagen de color sólido a partir de cualquier color.
La sintaxis es: image() = image( <color> ).
CSS light-dark() con valores de imagen
Se extiende la función light-dark() de CSS para aceptar valores de imagen, como url(), image-set() y none, en las hojas de estilo del autor, lo que permite que las propiedades de imagen, como background-image, list-style-image, border-image-source, cursor y content, cambien automáticamente entre imágenes según el esquema de color preferido del usuario. Anteriormente, este comportamiento solo se permitía en las hojas de estilo del agente de usuario. Este cambio se alinea con la especificación CSS Color 5 y coincide con la implementación existente de Firefox.
Clona en todos los elementos selectedcontent descendientes
Se están realizando varios cambios pequeños en los casos extremos del elemento selectedcontent:
- Cuando se colocan varios elementos
selectedcontenten un elemento<select>al mismo tiempo, todos se mantienen actualizados en lugar de solo el primero en el orden del DOM. - La actualización del elemento
selectedcontentse aplaza cuando se ejecuta durante los pasos de inserción, eliminación o movimiento para corregir problemas de seguridad. La actualización se aplaza con pasos posteriores a la inserción o microtareas.
Consultas de contenedores separadas por comas
Admite varias consultas por regla @container. La regla @container se aplica si coincide al menos una de las consultas.
Esta capacidad permite tener consultas alternativas para funciones que no son compatibles con todos los navegadores, por ejemplo.
Ejemplo:
@container --name1 not-supported(--foo: bar), --name2 (width > 600px) {}
Junto con la compatibilidad con varias búsquedas, el modelo de objetos se extiende para admitir el atributo conditions en la API de CSSContainerRule.
Cómo exponer áreas no imprimibles al CSS
Por lo general, las impresoras tienen un área pequeña en cada uno de los cuatro bordes de una hoja de papel que no pueden marcar de manera confiable, generalmente debido al mecanismo de manejo de papel de la impresora. Se espera que los márgenes de página predeterminados sean más grandes que estas áreas, pero si los autores establecen márgenes por su cuenta y hasta quieren agregar cuadros de margen @page, por ejemplo, para encabezados y pies de página personalizados, necesitan una forma de determinar dónde es seguro imprimir.
El descriptor de CSS page-margin-safety se puede usar para evitar esas áreas no imprimibles.
El atributo focusgroup
Permite que los autores proporcionen de forma declarativa a los widgets compuestos navegación con las teclas de flecha, una parada de tabulación garantizada y memoria del último enfoque, lo que reemplaza las secuencias de comandos de tabindex itinerante codificadas manualmente. Ejemplo:
<div focusgroup="toolbar wrap" aria-label="Formatting">
<button>Bold</button>
<button>Italic</button>
<button>Underline</button>
</div>
Seudoclases de elementos multimedia
Las seudoclases de CSS :playing, :paused, :seeking, :buffering, :stalled, :muted y :volume-locked coinciden con los elementos <audio> y <video> según su estado.
Esta función es una de las áreas de enfoque de Interop 2026.
Cambios en el comportamiento de popover=hint
Este cambio implementa un modelo de apilamiento revisado y simplificado para el atributo popover=hint y sus interacciones con popover=auto. Anteriormente, las interacciones entre estos dos tipos de ventanas emergentes podían ser complejas en algunas situaciones extremas, como anidar popover=auto dentro de popover=hint, y podían generar un comportamiento inesperado. Con el nuevo modelo, abrir un popover=hint ya no cierra inadvertidamente elementos popover=auto no relacionados. Las ventanas emergentes de sugerencias solo se ocultan cuando se oculta su popover=auto ancestral o cuando se abre un popover=auto nuevo no relacionado. Además, los desarrolladores pueden anidar de forma segura un elemento popover=auto automático dentro de un elemento popover=auto de sugerencia. En lugar de arrojar una excepción o interrumpir la pila, el elemento popover=auto anidado se degrada correctamente y se comporta como un elemento popover=hint.
Esta capacidad permite a los desarrolladores colocar un <select> personalizable dentro de un popover=hint.
Para mejorar aún más la previsibilidad y evitar mutaciones de estado complejas, Chrome también está ajustando el comportamiento en torno a la apertura y el cierre de ventanas emergentes desde el evento beforetoggle. Antes, había protecciones para algunos casos posibles, pero no para todos. Este cambio renueva el mecanismo que se usa para detectar estos casos y, así, generar InvalidStateError de forma más confiable para todos ellos. Este cambio garantiza que la administración del estado de la ventana emergente permanezca estable y evita los errores de reentrada en bucle.
Estos cambios se realizaron a partir de conversaciones sobre estándares con Mozilla en la solicitud de extracción de la especificación HTML en GitHub.
Colores alfa relativos
Los colores alfa relativos proporcionan una forma directa de CSS para derivar una versión translúcida de un color existente sin reescribir sus canales de color.
Actualmente, los desarrolladores deben duplicar los valores de los componentes o crear tokens precomputados separados cuando desean el mismo color con diferente opacidad.
La función alpha() de CSS Color 5 conserva los componentes de color originales y solo cambia el alfa, lo que reduce la sobrecarga de creación y facilita la reutilización y el mantenimiento de los tokens de color.
<iframe> con tamaño adaptable
Permite que los sitios habiliten el ajuste de tamaño responsivo de los elementos iframe, lo que ajusta el tamaño del elemento <iframe> en el documento principal al tamaño de desbordamiento del diseño del documento iframe para evitar el desplazamiento en el documento secundario.
flex-wrap:balance
flex-wrap:balance permite a los desarrolladores distribuir contenido entre líneas flexibles para que parezca más equilibrado, de manera similar a text-wrap:balance.
Función named-feature() para CSS @supports
La función named-feature() permite que las reglas de @supports de CSS consulten un pequeño conjunto de funciones específicas con nombre que no se pueden probar con otros mecanismos de @supports, pero que se consideran muy valiosas para probar.
overscroll-behavior: chain
overscroll-behavior tiene tres valores: none, auto y contain. Estos valores afectan dos efectos independientes: la propagación del desplazamiento y el efecto de borde local. Por ejemplo, el estiramiento de sobredesplazamiento.
none: No hay propagación del desplazamiento ni efectos de límite local.auto: Propagación del desplazamiento, efectos de límite local.contain: Sin propagación del desplazamiento, con efectos de límite local.
En esta versión, se hace un seguimiento de un valor nuevo para completar el conjunto: chain: propagación del desplazamiento, sin efectos de límite local.
Este valor es útil para efectos como los menús laterales implementados como desplazadores. Puedes hacer que aparezca el menú y, cuando llega al borde, no se desplaza en exceso ni se estira y se traslada. Sin embargo, el desplazamiento se encadena al elemento superior.
API web
Inhabilita los filtros SVG en complementos y en iframes restringidos o de origen cruzado
Chrome 150 impide que se apliquen filtros de gráficos vectoriales escalables (SVG) a los iframes de origen cruzado o restringidos, por ejemplo, los que están en zona de pruebas, y a los complementos incorporados, por ejemplo, los archivos PDF. Cuando se pinta un marco o un complemento con un efecto de filtro SVG, se recorre el árbol de efectos para encontrar el ancestro más alto sin filtros SVG, y se aplica ese efecto en su lugar.
IndexedDB: Backend de SQLite
La implementación de IndexedDB de Chromium se reescribe sobre SQLite para reemplazar la implementación anterior que usa un híbrido de LevelDB y archivos planos. Este cambio no afecta la API web.
Se espera que esta reescritura mejore la confiabilidad y, en menor medida, el rendimiento.
Por el momento, este cambio se aplica a los almacenes de datos nuevos. Este cambio es el paso 2 de un lanzamiento progresivo de varias fases. Consulta la página de funciones de ChromeStatus para los contextos en memoria de SQLite, en la que se hace un seguimiento del paso 1.
MediaStreamTrackProcessor contadores de fotogramas
Se agregan los atributos discardedFrames y totalFrames a la interfaz MediaStreamTrackProcessor. Estos contadores permiten que los desarrolladores web supervisen el estado de sus canalizaciones de procesamiento de medios haciendo un seguimiento de la cantidad de fotogramas que recibe y descarta el procesador.
Origen opaco para URLs de data:
Chrome 150 actualiza la forma en que DedicatedWorker y SharedWorker controlan las URLs de data:. En lugar de heredar automáticamente el origen de seguridad de la secuencia de comandos o la página que los creó, a estos workers se les asigna un origen opaco único.
Este cambio se alinea con la especificación de HTML del Worker y mejora la seguridad, ya que aísla a estos Workers del estado de mismo origen del creador, lo que les impide acceder a datos sensibles a través de mecanismos como BroadcastChannel o el almacenamiento de mismo origen. Para mantener los límites de aislamiento correctos, estos Workers aún residen dentro de la misma partición de almacenamiento (por ejemplo, conservando el sitio de nivel superior o el nonce) que su creador.
Este ajuste de seguridad está habilitado de forma predeterminada en las plataformas para computadoras y dispositivos móviles. Los administradores pueden revisar o verificar los límites de seguridad a través de sus configuraciones centralizadas. Para obtener detalles sobre la implementación técnica y referencias de especificaciones, consulta el paso 3 de la Configuración de trabajadores del estándar HTML dinámico.
Migración del origen de la AWP
Cuando un usuario instala una app web progresiva (AWP), su identidad y contexto de seguridad están estrechamente vinculados a su origen web, por ejemplo, app.example.com.
Esta vinculación representa un desafío significativo para los desarrolladores que necesitan cambiar el origen de su AWP debido a un cambio de la marca, una reestructuración del dominio o una rearquitectura técnica. Este cambio obliga a los usuarios a desinstalar manualmente la app anterior y volver a instalar la nueva, lo que genera una experiencia disruptiva y una posible pérdida de usuarios. Chrome 150 presenta un mecanismo para que los desarrolladores migren una AWP instalada a un origen nuevo del mismo sitio, lo que preserva la confianza y los permisos del usuario.
La política WebAppInstallForceList bloquea la migración. Dado que las políticas empresariales en torno a las aplicaciones web se basan principalmente en URLs y orígenes, existe el riesgo de que una migración omita ciertas políticas que un administrador podría haber configurado. Chrome no ofrece una migración al usuario cuando el administrador de la empresa fuerza la instalación de una app. En su lugar, muestra un banner que le explica esto al usuario.
Analiza las instrucciones de procesamiento en HTML
Las instrucciones de procesamiento (sintaxis: <?target data>) son una construcción DOM existente, expuesta en XML, que permite objetos de nodo que no son elementos, pero que pueden tener algún significado semántico para el procesamiento de un documento.
Por ejemplo, puedes usarlos para indicar rangos de transmisión o resaltado sin necesidad de nuevos elementos DOM y sin cambiar la estructura del DOM en lo que respecta a CSS, o bien como directivas para el analizador de HTML sobre cómo almacenar en búfer y transmitir.
Transmisión desordenada
La transmisión desordenada te permite usar <template for> y rangos de instrucciones de procesamiento (<?start> y <?end>) para entregar HTML en orden no secuencial y actualizar partes existentes del documento sin JavaScript.
Promesas de desplazamiento programáticas
Esta capacidad proporciona un indicador confiable del estado de finalización de un desplazamiento suave programático. Todos los métodos de desplazamiento en Element y Window devuelven objetos Promise que se resuelven cuando se completa el desplazamiento, y el valor resuelto indica si se interrumpió el desplazamiento.
WebGPU Immediates
Se agrega un nuevo espacio de direcciones inmediato en WGSL y un método setImmediateData() en los codificadores de pases de renderización, pases de procesamiento y paquetes de renderización que permite pasar pequeñas cantidades de datos actualizados con frecuencia directamente a los sombreadores sin crear objetos de búfer de GPU ni grupos de vinculación. Esto es particularmente útil para las aplicaciones que necesitan actualizar parámetros por dibujo, como índices de objetos, índices de materiales o matrices de transformación en cada llamada de dibujo, lo que permite mejoras significativas en el rendimiento al evitar la sobrecarga de administración de búferes y grupos de vinculación.
API de Web Speech: Calidad del reconocimiento integrado en el dispositivo
Extiende la interfaz SpeechRecognition agregando una propiedad quality a SpeechRecognitionOptions. Esta propiedad permite que los desarrolladores especifiquen la capacidad semántica requerida para el reconocimiento integrado en el dispositivo con processLocally: true.
El enum quality propuesto admite tres niveles: command, dictation y conversation, que se correlacionan con una mayor complejidad de las tareas y requisitos de hardware. Esta capacidad permite a los desarrolladores determinar si el dispositivo local puede controlar casos de uso de alto riesgo (como la transcripción de reuniones) o si deben recurrir a los servicios en la nube, lo que resuelve la naturaleza opaca de las capacidades del modelo integrado en el dispositivo.
Nuevas pruebas de origen
En Chrome 150, puedes habilitar las siguientes pruebas de origen nuevas.
Protocolo de verificación por correo electrónico (EVP)
El Protocolo de verificación por correo electrónico (EVP) ayuda a los usuarios a crear, acceder y recuperar cuentas, ya que proporciona pruebas criptográficas de propiedad sin problemas en lugar de OTP por correo electrónico de forma manual.
Bajas y eliminaciones
En esta versión de Chrome, se introducen las siguientes bajas y eliminaciones.
Quita [LegacyNoInterfaceObject] del IDL de FontFaceSet
Anteriormente, el IDL de FontFaceSet de Chromium usaba [LegacyNoInterfaceObject] de forma incorrecta, lo que ocultaba FontFaceSet como una propiedad global y borraba la propiedad del constructor de su prototipo. Este comportamiento se desvió de la especificación de CSS Font Loading y difirió del comportamiento de Safari y Firefox.
Esta eliminación quita [LegacyNoInterfaceObject] del IDL de FontFaceSet, lo que hace que se pueda acceder correctamente a FontFaceSet como una propiedad global. Dado que no se define ningún constructor() en el IDL, llamar a FontFaceSet() nuevo desde JavaScript arroja correctamente TypeError: Illegal constructor, lo que coincide con el comportamiento obligatorio de la especificación.