Notas de versão da plataforma Web do Microsoft Edge 149 (junho de 2026)

A seguir estão os novos recursos e atualizações da plataforma Web no Microsoft Edge 149, que será lançado em 4 de junho de 2026.

Para se manter atualizado e obter os recursos mais recentes da plataforma Web, baixe um canal de visualização do Microsoft Edge (Beta, Dev ou Canary); vá para Torne-se um Microsoft Edge Insider.

Conteúdo detalhado:

• Microsoft Edge DevTools
• WebView2
• Recursos CSS
  • Decorações de lacuna CSS
  • Texto do clipe excedente na interação do usuário
  • image-rendering: crisp-edges
  • path-length Propriedade CSS para elementos SVG
  • path(), shape(), rect()e xywh() em shape-outside
  • Removido border-color: gray da folha de estilos do agente do usuário para <table>
  • Escopo: cor de destaque do sistema para aplicativos Web instalados
  • Pseudo-classes de ação do usuário limite da camada superior
• APIs da Web
  • Variantes de Intl.Locale
  • Migrar um PWA para uma nova origem
  • Distinguir erros do manipulador de pagamento em uma solicitação de pagamento
  • Request.isReloadNavigation de atributo
  • Campos de tempo do roteador do Trabalho de Serviço em APIs de tempo de tempo de navegação e tempo de navegação de recursos
  • autocorrect="off" no teclado de toque do Windows
  • Adiar leituras de dados da área de transferência até que o tipo MIME seja especificado
  • Fechar conexões WebSocket na entrada bfcache
• Avaliações de origem

Microsoft Edge DevTools

Veja as novidades no DevTools (Microsoft Edge 149).

WebView2

Consulte o SDK da versão 1.0.4022.49, para o Runtime 149 (9 de junho de 2026) nas Notas de versão do SDK do WebView2.

Recursos CSS

Os novos recursos de CSS (folhas de estilos em cascata) a seguir estão incluídos no Microsoft Edge.

Decorações de lacuna CSS

Estilize as lacunas nos layouts de contêiner Grid e Flexbox, semelhante ao column-rule layout de várias colunas. Use decorações de lacunas para separar visualmente os itens sem recorrer a soluções alternativas, como pseudoelementos ou elementos adicionais da embalagem.

Veja também:

• Uma nova maneira de estilizar lacunas em CSS
• Layout de várias colunas no MDN.

Texto do clipe excedente na interação do usuário

Quando um usuário interage com um texto que foi text-overflow: ellipsis definido (como durante a edição ou a navegação com cursor), o texto muda temporariamente de reticências para clipe (no qual o truncamento pode acontecer no meio de um caractere). Isso permite que o usuário veja e interaja com o conteúdo excedente oculto.

Esse comportamento se aplica a todos os elementos editáveis e não editáveis. Os controles de formulário (<textarea>, <input>) já dão suporte a esse comportamento.

Veja também:

• text-overflow no MDN.

image-rendering: crisp-edges

A image-rendering propriedade agora dá suporte ao crisp-edges valor.

Use image-rendering: crisp-edges para dimensionar uma imagem de uma forma que preserve o contraste e as bordas, sem suavizar as cores ou introduzir desfoque.

Veja também:

• renderização de imagens no MDN.

path-length Propriedade CSS para elementos SVG

Use a nova path-length propriedade CSS para definir o valor do pathLength atributo em elementos de geometria SVG, incluindo:

• <path>
• <circle>
• <rect>
• <line>
• <polyline>
• <polygon>
• <ellipse>

A path-length propriedade CSS permite que você manipule o valor do atributo de um SVG por meio de folhas de estilo, estilos embutidos pathLength e animações.

As declarações CSS substituem o atributo de apresentação SVG seguindo as regras de precedência padrão do CSS. O valor inicial é none.

Veja também:

• pathLength no MDN.

path(), shape(), rect()e xywh() em shape-outside

Agora você pode usar as path()funções , shape(), rect()e xywh() shape na propriedade CSS para definir formas de shape-outside exclusão flutuantes.

Veja também:

• path() Função CSS no MDN.
• shape() Função CSS no MDN.
• rect() Função CSS no MDN.
• xywh() Função CSS no MDN.
• propriedade CSS float no MDN.

Removido border-color: gray da folha de estilos do agente do usuário para <table>

A regra incorreta border-color: gray foi removida da folha de estilo do agente do usuário do navegador para o <table> elemento. As bordas da tabela agora têm currentColorcomo padrão , correspondendo à especificação HTML e a outros navegadores.

Veja também:

• <table> HTML table element at MDN.

Escopo: cor de destaque do sistema para aplicativos Web instalados

O accent-color: auto valor CSS para controles de formulário agora aplica a cor de destaque do sistema operacional somente em contextos de aplicativos Web instalados. Em páginas da Web regulares, os controles de formulário usam uma cor de destaque padrão do navegador.

Essa alteração alinha o comportamento com as AccentColor palavras-chave de cor do sistema CSS accent-color: auto e AccentColorText , que também têm como escopo os contextos de aplicativos Web instalados, para reduzir a impressão digital.

Veja também:

• cor de destaque no MDN.

Pseudo-classes de ação do usuário limite da camada superior

As :hoverclasses , :active, e :focus-within pseudo-classes agora correspondem aos elementos pai apenas até o primeiro elemento da camada superior na cadeia de elementos pai.

Por exemplo, considere este HTML:

<main>
  <div popover>
    <button></button>
  </div>
</main>
<script>document.querySelector('[popover]').showPopover();</script>

Quando o usuário passa o mouse sobre o <button> elemento, a :hover pseudo-classe corresponde a and <button> e os <div popover> elementos, mas não corresponde ao <main> elemento, porque o <div popover> é um elemento da camada superior.

Os elementos da camada superior são renderizados visualmente fora de seu contexto pai, portanto, é indesejável alterar os estilos pai quando um elemento da camada superior é passado ou ativado.

Veja também:

• Ação do Usuário Pseudo-classes em Seletores Nível 4.
• API popover no MDN.

APIs da Web

Os novos recursos da API Web a seguir estão incluídos no Microsoft Edge.

Variantes de Intl.Locale

O Intl.Locale objeto agora expõe uma variants propriedade. Agora você também pode passar uma variants cadeia de caracteres nas opções do Intl.Locale construtor.

As variantes de uma localidade representam preferências adicionais de idioma que não são cobertas pelos campos de idioma, região e script de uma ID de idioma.

Veja também:

• Intl.Locale no MDN.

Migrar um PWA para uma nova origem

Agora você pode migrar perfeitamente um Aplicativo Web Progressivo (PWA) instalado para uma nova origem no mesmo site, preservando a confiança e as permissões do usuário.

Quando um usuário instala um PWA, sua identidade é vinculada à sua origem na Web (por exemplo, app.example.com). Anteriormente, alterar a origem forçava os usuários a desinstalar e reinstalar manualmente o aplicativo. Esse recurso elimina essa interrupção.

Veja também:

• Aplicativos Web progressivos no MDN.

Distinguir erros do manipulador de pagamento em uma solicitação de pagamento

Um manipulador de pagamento acessado por meio da API de Solicitação de Pagamento agora pode retornar erros distintos para "usuário cancelado" versus "erro interno do aplicativo de pagamento".

Use essa distinção para criar fluxos melhores para seus usuários. Por exemplo, quando ocorrer um erro interno, tente novamente ou retorne a uma forma de pagamento diferente, interrompendo corretamente o fluxo se o usuário cancelar.

• Se a promessa para a qual foi passada PaymentRequestEvent.respondWith for rejeitada com um OperationError, sua PaymentRequest.show() promessa receberá um OperationError.
• Se a promessa para a qual é passada PaymentRequestEvent.respondWith for rejeitada com um valor diferente de , sua PaymentRequest.show() promessa receberá um AbortError (cancelamento do OperationErrorusuário).

Veja também:

• API de Pedido de Pagamento no MDN.

Request.isReloadNavigation de atributo

O isReloadNavigation atributo agora está disponível na interface da Request API de Busca. Esse atributo indica se a solicitação de navegação foi iniciada como um recarregamento disparado pelo usuário, como quando o usuário clica no botão Atualizar ou quando o location.reload() método ou history.go(0) é executado.

O isReloadNavigation atributo é um booleano somente leitura.

Use esse atributo no manipulador do FetchEvent Service Worker para implementar estratégias de cache, como ignorar o cache ou impor uma estratégia de rede especificamente durante uma recarga.

Veja também:

• Request.isReloadNavigation no Fetch Standard.

Campos de tempo do roteador do Trabalho de Serviço em APIs de tempo de tempo de navegação e tempo de navegação de recursos

Os workerMatchedRouterSource atributos and workerFinalRouterSource agora estão disponíveis nas APIs Resource Timing e Navigation Timing.

• Use o workerMatchedRouterSource atributo para identificar qual regra de roteador estático do trabalho de serviço foi correspondida.

• Use o workerFinalRouterSource atributo para identificar a fonte final que foi usada para a solicitação.

Veja também:

• API de Trabalho de Serviço no MDN.
• Use a API de roteamento estático do Service Worker para ignorar o service worker para caminhos específicos.

autocorrect="off" no teclado de toque do Windows

O autocorrect atributo agora funciona corretamente no teclado de toque do Windows. Anteriormente, o teclado virtual ignorava o valor do autocorrect="off" atributo e sempre corrigia automaticamente as palavras.

Para evitar que o teclado virtual substitua o texto digitado, defina o valor do autocorrect="off" atributo em:

• Um <input> elemento.
• Um <textarea> elemento.
• Qualquer elemento que tenha o contenteditable atributo definido.

Veja também:

• correção automática no MDN.

Adiar leituras de dados da área de transferência até que o tipo MIME seja especificado

A API da área de transferência assíncrona agora adia a leitura dos dados da área de transferência do sistema operacional até você chamar getType(). Quando você chama navigator.clipboard.read(), o navegador retorna uma matriz de ClipboardItem objetos, cada um com seus tipos MIME disponíveis, mas sem os dados subjacentes. Os dados reais são somente leitura quando você solicita um formato específico.

const items = await navigator.clipboard.read(); // No data is read yet.
const text = await items[0].getType('text/plain'); // Only the 'text/plain' data is read here.

Isso reduz o uso da CPU e melhora a capacidade de resposta percebida da chamada à API.

Veja também:

• API da Área de Transferência no MDN.

Fechar conexões WebSocket na entrada bfcache

Uma conexão WebSocket aberta agora é fechada quando uma página entra no cache de retorno/avanço (bfcache), em vez de impedir que a página seja armazenada em cache.

Anteriormente, uma página que tinha uma conexão WebSocket ativa não podia ser armazenada no bfcache. Com essa alteração, mais páginas se beneficiam da navegação instantânea para trás e para frente.

Quando sua página entra no bfcache, a página recebe um close evento em cada .WebSocket Ouça o pageshow evento e reconecte-se quando event.persisted for true.

Veja também:

• WebSocket no MDN.
• Trabalhando com o bfcache no MDN.

Avaliações de origem

A seguir estão as avaliações de origem para novas APIs experimentais que estão disponíveis no Microsoft Edge.

As avaliações de origem permitem que você experimente APIs experimentais em seu próprio site ativo por tempo limitado. Para saber mais sobre avaliações de origem, consulte Usar avaliações de origem no Microsoft Edge.

Para obter a lista completa de avaliações de origem disponíveis, consulte Avaliações de origem do Microsoft Edge.