Notas de la versión de la plataforma web de Microsoft Edge 150 (julio de 2026)

A continuación se muestran las nuevas características y actualizaciones de la plataforma web en Microsoft Edge 150, que se publica el 2 de julio de 2026.

Para mantenerse al día y obtener las características más recientes de la plataforma web, descargue un canal en versión preliminar de Microsoft Edge (Beta, Desarrollo o Canary); vaya a Convertirse en microsoft edge insider.

Contenido detallado:

Microsoft Edge DevTools

Consulte Novedades de Microsoft Edge DevTools.

WebView2

Consulte notas de la versión del SDK de WebView2.

Características de CSS

Las siguientes características nuevas de hojas de estilos en cascada (CSS) se incluyen en Microsoft Edge.

AccentColor y AccentColorText colores del sistema

Los AccentColor colores del sistema y AccentColorText ahora se pueden usar como valores de color CSS para acceder al color de énfasis del sistema especificado en el dispositivo del usuario.

Vea también:

Permitir parámetro de redondeo opcional para polygon()

Permite un parámetro opcional round en la función de polygon() forma CSS. Puede especificar un valor de longitud para redondear las esquinas del polígono, sin calcular manualmente las curvas bézier.

Por ejemplo, para crear un triángulo redondeado: polygon(round 50px, 50% 0%, 0% 100%, 100% 100%)

Vea también:

Zoom animable

La propiedad CSS zoom se puede animar e interpola como .<number> Puede realizar la transición y animar el zoom para escalar sin problemas los elementos y su diseño, complementando el escalado basado en transformaciones existente.

Vea también:

Modificadores de solicitud de dirección URL CSS

Las siguientes funciones CSS se pueden usar con la función CSS url() para controlar el comportamiento de captura del recurso al que se hace referencia:

  • cross-origin()
  • integrity()
  • referrer-policy()

Por ejemplo, background-image: url("image.png" cross-origin(anonymous)) captura la imagen mediante el modo anónimo CORS.

Esto proporciona un control específico sobre el acceso entre orígenes, la integridad de los subrecursos y la directiva de referencia para los recursos cargados con CSS, entre los que se incluyen:

  • Imágenes.
  • Fuentes.
  • Referencias SVG.
  • Hojas de estilos importadas.

Vea también:

Css text-fit (propiedad)

La propiedad CSS text-fit escala el tamaño de fuente de un nodo de texto para ajustarse perfectamente al ancho de su cuadro contenedor.

Esta propiedad le permite asegurarse de que los titulares o el contenido dinámico llenen el espacio horizontal disponible, sin cálculos manuales de tamaño de fuente o soluciones alternativas complejas de JavaScript.

Esta propiedad proporciona una solución sólida y nativa de CSS para la tipografía con capacidad de respuesta que mantiene la alineación visual entre diferentes tamaños de pantalla y longitudes de texto variables.

Vea también:

CSS background-clip: border-area

La propiedad CSS background-clip: border-area recorta el fondo de un elemento en el área pintada por sus trazos de borde, teniendo border-width en cuenta y border-style sin tener en cuenta la transparencia de border-color.

Esto permite bordes degradados sin border-image.

Vea también:

Función CSS image(<color>)

La función CSS image() permite generar fácilmente una imagen de color sólido a partir de cualquier color.

Por ejemplo, para crear una imagen de fondo roja sólida, use background: image(red);.

Vea también:

CSS light-dark() con valores de imagen

La función CSS light-dark() ahora acepta valores de imagen (url(), image-set(), none).

Esto permite cambiar automáticamente entre imágenes en función de la combinación de colores preferida del usuario.

Puede usar la light-dark() función con valores de imagen en las propiedades siguientes:

  • background-image
  • list-style-image
  • border-image-source
  • cursor
  • content

Vea también:

Consultas de contenedor separadas por comas

La @container regla ahora admite varias consultas de contenedor, separadas por comas. La @container regla se aplica si al menos una de las consultas coincide.

Esto permite tener consultas de reserva para características que no se admiten en todos los exploradores.

Ejemplo:

@container --name1 not-supported(--foo: bar), --name2 (width > 600px) {}

Vea también:

Exposición de áreas no imprimibles a través de CSS

Use la propiedad CSS page-margin-safety para evitar intentar imprimir en áreas no imprimibles de una hoja de papel.

Una impresora suele tener un área pequeña en cada uno de los cuatro bordes de una hoja de papel que la impresora no es capaz de marcar de forma confiable, normalmente debido al mecanismo de manipulación de papel de la impresora.

Se espera que los márgenes de página predeterminados sean mayores que estas áreas de borde de papel, pero si estableces márgenes en la aplicación y quieres agregar @page cuadros de margen (por ejemplo, para encabezados y pies de página personalizados), la page-margin-safety propiedad proporciona una manera de detectar dónde es seguro imprimir.

Vea también:

Pseudo-clases de elementos multimedia

Las siguientes pseudo-clases CSS coinciden <audio> con los elementos y <video> en función de su estado:

  • :playing
  • :paused
  • :seeking
  • :buffering
  • :stalled
  • :muted
  • :volume-locked

Vea también:

Función CSS alpha()

La función CSS alpha() crea un nuevo color aplicando un valor alfa especificado a un color existente.

Por ejemplo, alpha(from red / 0.5) crea un color rojo semitransparente con una opacidad del 50 %.

Vea también:

named-feature() función para CSS @supports

La named-feature() función permite que las reglas CSS @supports consulten un pequeño conjunto de características con nombre específicas que no son posibles probar mediante otros @supports mecanismos, pero que son útiles para probar.

Vea también:

overscroll-behavior: chain

La overscroll-behavior propiedad CSS ahora admite el chain valor .

Esta propiedad afecta a dos efectos independientes:

  • Propagación de desplazamiento.
  • Efecto de borde local (por ejemplo, sobrescribir stretch).

Anteriormente, overscroll-behavior tenía tres valores:

  • none: sin propagación, sin efecto local.
  • auto: Propagación, efecto local.
  • contain: sin propagación, efecto local.

Esta característica agrega un nuevo valor para completar el conjunto:

  • chain: Propagación, sin efecto local.

Vea también:

flex-wrap:balance

flex-wrap:balance permite distribuir contenido entre cada flex-line, de modo que el diseño parezca más equilibrado.

Esto es similar a text-wrap:balance.

Vea también:

Características HTML

Las siguientes nuevas características HTML se incluyen en Microsoft Edge.

focusgroup atributo

El atributo HTML focusgroup estandariza la navegación del teclado para widgets compuestos, como barras de herramientas, pestañas, menús y grupos de radio.

El focusgroup atributo controla automáticamente lo siguiente, sin necesidad de código JavaScript personalizado:

  • Comportamiento de tabulación de itinerante .
  • Navegación a través de teclas de flecha.
  • Memoria de foco; restaura el último elemento centrado al volver a entrar en el grupo de foco.

Ejemplo:

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

Vea también:

popover="hint" cambios en el comportamiento de los atributos

El comportamiento de los elementos con el popover="hint" atributo ha cambiado para mejorar las interacciones con popover="auto" los elementos: al abrir un popover="hint" elemento ya no se cerrarán involuntariamente los elementos no relacionados popover="auto" .

Anteriormente, las interacciones entre estos dos tipos de elementos emergentes podían ser complejas en algunas situaciones, como anidar popover="auto" elementos dentro popover="hint" de elementos.

popover="hint" Ahora, los elementos solo están ocultos cuando su elemento ancester popover="auto" está oculto o cuando se abre un nuevo elemento no relacionado popover="auto" .

Además, ahora puede anidar de forma segura un popover="auto" elemento dentro de un popover="hint" elemento. El elemento anidado popover="auto" se comportará como un popover="hint" elemento. Esto permite casos de uso como colocar un elemento personalizable <select> dentro de un popover="hint" elemento.

Vea también:

Actualización de todos los <selectedcontent> elementos de un elemento personalizable <select>

Cuando se definen varios <selectedcontent> elementos en un elemento personalizable <select> , todos ellos ahora se mantienen actualizados con la opción seleccionada actual, en lugar de solo la primera en orden DOM.

Vea también:

Html de streaming fuera de orden

Use el <template for> elemento HTML y los <?start> intervalos de instrucciones y <?end> de procesamiento para actualizar las partes existentes del documento sin necesidad de usar JavaScript.

Esta característica forma parte de una iniciativa más grande para agregar compatibilidad integrada con las actualizaciones del mismo documento en la web.

Vea también:

API web

Las siguientes nuevas características de API web se incluyen en Microsoft Edge.

Exponer la FontFaceSet interfaz globalmente

Anteriormente, la FontFaceSet interfaz no se exponía como una propiedad global. lenguaje de definición de interfaz (IDL) de Chromium para FontFaceSet aplicarlo LegacyNoInterfaceObject previamente incorrectamente a FontFaceSet, ocultándolo como una propiedad global.

Este cambio se alinea Chromium con la especificación carga de fuentes CSS y con Safari y Firefox.

Vea también:

Deshabilitación de filtros SVG en iframes y complementos de origen cruzado

Los filtros SVG ya no se aplican a lo siguiente:

  • Iframes de origen cruzado o restringidos (como iframes de espacio aislado).
  • Complementos incrustados (como archivos PDF).

Esto evita que se procesen posibles problemas de seguridad del contenido entre orígenes a través de efectos de filtro SVG.

Vea también:

MediaStreamTrackProcessor contadores de marco

Los discardedFrames atributos y totalFrames ahora están disponibles en la MediaStreamTrackProcessor interfaz.

Estos contadores permiten supervisar el estado de la canalización de procesamiento multimedia mediante el seguimiento de:

  • Número de fotogramas recibidos.
  • Número de fotogramas que se quitaron debido a restricciones de recursos del sistema.

Vea también:

Origen opaco para data: direcciones URL

Los trabajos dedicados y los trabajos compartidos creados a partir de data: direcciones URL ahora tienen asignado un origen opaco único, en lugar de heredar el origen del creador.

Esto alinea Edge con el Standard HTML y mejora la seguridad mediante el aislamiento de estos trabajos del mismo estado de origen, como BroadcastChannel, localStoragey IndexedDB.

Para conservar los límites de aislamiento, estos trabajos permanecen en la misma partición de almacenamiento que su creador (por ejemplo, por sitio de nivel superior o nonce).

Vea también:

Migración del origen de PWA

La migración del origen de la aplicación web permite que una aplicación web progresiva (PWA) se migre a un nuevo origen conservando la confianza, el estado de instalación y los permisos aplicables.

Esto ayuda a los equipos a mover aplicaciones de forma segura entre dominios sin forzar a los usuarios a reinstalar.

Vea también:

Reciba una notificación cuando se completen los scrollBy métodos y .scrollTo

Los métodos de desplazamiento mediante programación, como scrollBy y scrollTo, ahora devuelven un Promise objeto que se resuelve cuando se completa el desplazamiento. Use esta promesa para ejecutar código una vez que finalice un desplazamiento suave, sin depender de un temporizador o un sondeo de eventos de desplazamiento.

Vea también:

API de voz web: calidad de reconocimiento en el dispositivo

La SpeechRecognition interfaz ahora admite la quality propiedad .

La quality propiedad permite especificar la funcionalidad semántica necesaria para el reconocimiento, que usa processLocally: true, también conocida como reconocimiento en el dispositivo.

Los valores admitidos por la quality propiedad se asignan a requisitos de hardware y complejidad de tareas crecientes:

  • command
  • dictation
  • conversation

Con la quality propiedad , puede determinar si el dispositivo puede controlar el caso de uso mediante el reconocimiento en el dispositivo o si debe realizar una reserva en un servicio de reconocimiento en la nube.

Vea también:

WebGPU: inmediatos

WebGPU ahora admite inmediatos.

Esta característica agrega un immediate espacio de direcciones en WGSL y setImmediateData() métodos en el paso de representación, el paso de proceso y los codificadores de agrupación de representación. Puede usar estas API para pasar valores pequeños y actualizados con frecuencia a sombreadores sin crear búferes de GPU ni enlazar grupos.

Esto resulta útil para los datos por dibujo, como índices de objetos, índices de material y valores de transformación.

Vea también:

Pruebas de origen

A continuación se muestran las pruebas de origen de las nuevas API experimentales que están disponibles en Microsoft Edge.

Las pruebas de origen le permiten probar las API experimentales en su propio sitio web en directo durante un tiempo limitado. Para más información sobre las pruebas de origen, consulte Uso de las pruebas de origen en Microsoft Edge.

Para obtener la lista completa de las pruebas de origen disponibles, consulte Pruebas de origen de Microsoft Edge.

Nombre Descripción Registrarse
Prompt API Consultas un modelo de lenguaje integrado desde el código JavaScript de extensión o sitio web. Consulte también Prompt API. Registrarse
Descriptores personalizados de WebAssembly Almacena los datos asociados a tipos de nivel de origen de forma más eficaz, en objetos descriptores personalizados. Registrarse
Heurística de navegación suave Expone heurística de navegación temporal para recopilar métricas de rendimiento en aplicaciones de página única. Registrarse
WebNN Compile y ejecute modelos de aprendizaje automático acelerados por hardware directamente en la aplicación web. Registrarse
Url y hashes de eval en script-src de CSP Introduce valores hash url y eval para script-src las directivas CSP, reemplazando las listas de permitidos basadas en nombre de host y unsafe-eval. Registrarse
API de instalación web Permite que un sitio web instale otro sitio web como una aplicación web mediante navigator.install(). Registrarse
OpaqueRange Permite crear intervalos dinámicos sobre texto dentro <input> de y <textarea> elementos que se actualizan automáticamente a medida que el usuario edita. Estos intervalos admiten métodos de geometría como getBoundingClientRect() y la API de resaltado personalizado de CSS, que permite casos de uso como elementos emergentes colocados en intercalación y resaltado de corrector ortográfico insertado directamente en los controles de formulario, sin clonar elementos ni exponer la estructura dom interna. Registrarse
HTML en el lienzo Habilita la representación de HTML en el lienzo con nuevos métodos de dibujo y el paint evento . Registrarse
API de credenciales digitales: compatibilidad con la emisión Desencadena la emisión de credenciales de usuario desde un servidor emisor de credenciales a una aplicación de cartera digital. Registrarse
prerender_until_script Acción de api de reglas de especulación Una acción de la API De reglas de especulación que representa previamente una página, pero cambia a captura previa cuando se ejecuta un script. Registrarse
WebAudio Configurable Render Quantum Permite especificar un tamaño cuántico de representación personalizado al crear o AudioContextOfflineAudioContext. Registrarse
Activación previa a la representación por envío de formulario Permite activar reglas de representación previa en la API de reglas de especulación mediante envíos de formularios. Registrarse
API de rendimiento de CPU Expone información sobre las funcionalidades del dispositivo del usuario para su uso con Compute Pressure API. Registrarse
Listas de permitidos de conexión Restringe las conexiones de un documento o trabajo a una lista de puntos de conexión distribuidos por el servidor. Registrarse
focus-without-user-activation directiva de permisos Proporciona un control de incrustación sobre el foco mediante programación desde el contenido incrustado a través de la directiva de focus-without-user-activation permisos. Cuando se deniega la directiva para un marco, las llamadas de foco mediante programación (element.focus(), autofocus, window.focus(), dialog.showModal()y foco emergente) se bloquean a menos que se desencadene mediante la activación del usuario o se delegue el foco. Registrarse
TextMetrics de lienzo mejorado Expande textmetrics Canvas API con rectángulos de selección, consultas de cuadro delimitador y operaciones de glifo-clúster. Registrarse
<usermedia> Elemento HTML Elemento HTML controlado por el explorador para solicitar acceso a la cámara o al micrófono, reemplazando las solicitudes de permisos basadas en JavaScript. Registrarse
Representación previa de iframes entre orígenes Representa previamente los iframes entre orígenes a través de un encabezado de respuesta de participación, en lugar de retrasarlos hasta la activación de la página. Registrarse
Control de tiempo del contenedor Supervisa cuándo se muestra un contenedor DOM anotado y ha terminado su pintura inicial. Registrarse
Duraciones de diseño y estilo independientes en Long Animation Frame API Agrega styleDurationpropiedades , forcedStyleDuration, layoutDurationy forcedLayoutDuration para un análisis más profundo del rendimiento de CSS. Registrarse
Preguntar parámetros de muestreo de API Los topK parámetros de muestreo y temperature permiten optimizar el comportamiento del modelo por sesión de modelo de lenguaje. Registrarse
<install> Elemento HTML Instale de forma declarativa otros sitios web como aplicaciones web mediante el <install> elemento . Registrarse
Scripts de módulo CSS declarativos Comparte hojas de estilos declarativas con raíces de sombra, incluidas las raíces de sombra declarativas, mediante módulos de estilo insertado. Registrarse
Evento de entrada sin procesar de Gamepad En lugar de basarse en sondeos frecuentes a través navigator.getGamepads()de , las páginas web pueden escuchar gamepadrawinputchanged eventos. Estos eventos se desencadenan cada vez que se detectan cambios entre fotogramas de entrada del mismo dispositivo. Registrarse
Evento De autorrellenar Detecta cuándo el autorrellenamiento del explorador actualiza los controles de formulario para adaptar la interfaz de usuario personalizada y la validación. Registrarse
Descriptores personalizados de WebAssembly V2 Almacena los datos asociados a tipos de nivel de origen de forma más eficaz, en objetos descriptores personalizados. Registrarse
WebMCP Permite que el sitio registre herramientas para que un agente en el explorador complete tareas en nombre de un usuario. Registrarse

Nota:

Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por Chromium.org y usadas de acuerdo con los términos descritos en la Licencia internacional creative Commons Attribution 4.0.

  • Last updated on