Notas de versão da plataforma Web do Microsoft Edge 137 (maio de 2025)

A seguir estão os novos recursos e atualizações da plataforma da Web no Microsoft Edge 137, que será lançado em 29 de maio de 2025.

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

Veja as novidades no DevTools (Microsoft Edge 137).

WebView2

Consulte o SDK da versão 1.0.3296.44, para Runtime 137 (3 de junho de 2025) em Notas de versão arquivadas para o SDK do WebView2.

Recursos da plataforma Web

Recursos CSS

Função CSS if()

A função CSS if() fornece uma maneira simples e concisa de expressar valores lógicos condicionais.

A if() função aceita uma série de pares de valor de condição, delimitados por ponto-e-vírgula. A função avalia cada condição sequencialmente e retorna o valor associado à primeira true condição. Se nenhuma das condições for avaliada como true, a função retornará um fluxo de token vazio.

No exemplo a seguir, a if() função é usada para definir a cor da tela de fundo de um div elemento com base no valor de uma propriedade --colorpersonalizada:

<style>
  div {
    color: var(--color);
    background-color: if(style(--color: white): black; else: white);
  }
  .dark {
    --color: black;
  }
  .light {
    --color: white;
  }
</style>
<div class="dark">dark</div>
<div class="light">light</div>

Consulte Seleção de valor condicional: a notação if() no CSS Values and Units Module Level 5.

CSS reading-flow e reading-order propriedades

A reading-flow propriedade CSS controla o seguinte:

  • A ordem em que os elementos em um layout flexível, de grade ou de bloco são expostos às ferramentas de acessibilidade.
  • A ordem em que os elementos em um layout flexível, de grade ou de bloco são focados ao usar a tecla Tab .

A reading-flow propriedade dá suporte aos seguintes valores:

  • normal
  • flex-visual
  • flex-flow
  • grid-rows
  • grid-columns
  • grid-order
  • source-order

A reading-order propriedade CSS permite substituir manualmente o pedido em um contêiner de fluxo de leitura. O reading-order valor é um inteiro cujo padrão é 0.

Veja também:

Suporte para shape() em offset-path

A shape() função CSS, que já é compatível com a clip-path propriedade CSS, agora também é compatível com a offset-path propriedade CSS.

Isso permite que a mesma forma seja reutilizada em várias propriedades CSS.

Veja offset-path no MDN.

Cor de destaque do sistema para accent-color a propriedade

A accent-color propriedade CSS permite personalizar a cor dos elementos do formulário, como caixas de seleção, botões de opção ou barras de progresso.

Agora, a cor padrão da propriedade corresponde à accent-color cor de destaque do sistema operacional./g/blink-dev/c/WwYkLjbGhoA

Veja a cor de destaque no MDN.

Nomes de transição de exibição gerados automaticamente

A view-transition-name propriedade CSS suporta dois novos valores, para evitar ter que inventar nomes exclusivos para elementos que participam de uma transição de exibição:

  • match-element - Gera uma ID exclusiva com base na identidade do elemento. Esse valor é útil em aplicativos de página única em que o elemento animado com uma transição de exibição está sendo movido no DOM.

  • auto - Gera uma ID exclusiva com base no atributo do id elemento. Esse valor leva apenas o id atributo em consideração e ignora o tipo de elemento. Essa abordagem permite que uma transição de exibição funcione em várias páginas de um aplicativo, em que elementos com o mesmo id atributo podem ser de tipos diferentes.

Consulte Determinando o nome da transição de exibição automaticamente.

Suporte para o transform atributo em <svg>

As propriedades de transformação, como dimensionamento, rotação, translação e inclinação, agora são suportadas diretamente no <svg> elemento, usando o transform atributo.

Isso permite que você manipule todo o sistema de coordenadas SVG ou seu conteúdo como um todo, proporcionando maior flexibilidade na criação de gráficos vetoriais dinâmicos, responsivos e interativos.

Ao dar suporte ao transform atributo, um <svg> elemento pode ser transformado sem a necessidade de elementos wrapper adicionais ou soluções alternativas CSS complexas.

Veja transformar no MDN.

Ignorar letter-spacing em letras cursivas

De acordo com a especificação, o navegador agora ignora a letter-spacing propriedade CSS ao renderizar scripts cursivos, para evitar quebrar palavras.

Se possível, o navegador pode aplicar espaçamento entre letras convertendo o espaço extra em alongamento ou compactação cursiva. Se o texto não puder ser expandido sem interromper as conexões cursivas, o navegador tratará cada palavra como uma única unidade tipográfica para espaçamento entre letras.

O alongamento ou compressão cursiva adequado varia, com base em:

  • script.
  • Face de tipos.
  • Idioma.
  • Local do Word.
  • Localização da linha.
  • Complexidade de implementação.
  • Recursos de fonte.
  • Preferências caligráficas.

O alongamento ou compressão cursiva adequada pode envolver encurtamento:

  • Ligaduras.
  • Variantes Swash.
  • Formulários contextuais.
  • Glifos de alongamento.

Evite aplicar a letter-spacing propriedade a scripts cursivos, a menos que você possa aceitar resultados não interoperáveis.

Consulte espaçamento entre letras no MDN.

APIs da Web

Altere o tipo de erro gerado para payment a criação de credencial de autenticação da Web de SecurityError para NotAllowedError

Anteriormente, ao criar uma payment credencial em um iframe entre origens sem uma ativação do usuário, um SecurityError era lançado.

O tipo de erro agora foi alterado para NotAllowedError, para corresponder ao tipo de erros gerados para credenciais de não pagamento.

Consulte a API de solicitação de pagamento no MDN.

Permitir que o elemento SVG <use> faça referência a documentos externos sem exigir uma ID de fragmento de URL

Os elementos SVG <use> agora podem ser vinculados a documentos SVG externos sem a necessidade de especificar um identificador de fragmento.

Anteriormente, você precisava fazer referência explícita a fragmentos em documentos SVG. Por exemplo:

<svg>
  <use xlink:href="myshape.svg#icon"></use>
</svg>

No exemplo acima, #icon o identificador de fragmento aponta para um elemento com o id="icon" atributo dentro do myshape.svg documento. Se nenhum identificador foi fornecido, o <use> elemento não foi capaz de resolver o destino e nada foi renderizado.

Agora você pode omitir identificadores de fragmento e fornecer apenas o nome do arquivo de documento SVG externo. Essa ação faz referência automaticamente ao elemento raiz dentro do documento SVG. Por exemplo:

<svg>
  <use xlink:href="myshape.svg"></use>
</svg>

Veja <use> no MDN.

Particionamento de URL de blob

O acesso à URL do blob agora é particionado pela chave de armazenamento. As chaves de armazenamento são sites de nível superior, origens de quadro e booleanos has-cross-site-ancestor . As navegações de nível superior permanecem particionadas apenas pela origem do quadro.

O acesso à URL do Blob de particionamento pela chave de armazenamento é semelhante ao que é implementado atualmente pelo Firefox e pelo Safari. Isso alinha o uso da URL do Blob com o esquema de particionamento usado por outras APIs de armazenamento como parte do Particionamento de Armazenamento.

Junto com essa alteração, o Microsoft Edge agora impõe noopener navegações de nível superior iniciadas pelo renderizador para URLs de Blob, onde o site correspondente é intersite para o site de nível superior que está executando a navegação. Isso se alinha com comportamento semelhante no Safari e com as especificações correspondentes.

O particionamento de URL de blob pode ser revertido temporariamente definindo a PartitionedBlobUrlUsage política:

  • Se essa política estiver definida Enabled como ou não for definida, as URLs de Blob serão particionadas.
  • Se essa política estiver definida como Disabled, as URLs de blob não serão particionadas.

Consulte Restrições de acesso em URLs de blob na especificação da API de arquivo.

Pilhas de chamadas em relatórios de falhas de páginas da Web que não respondem

Quando uma página da Web deixa de responder devido ao código JavaScript executando uma computação muito longa, como um loop infinito, a pilha de chamadas Javascript é gravada e incluída no relatório de falha enviado ao ponto de extremidade do servidor da API de Relatório configurado pelo site.

Consulte a API de relatórios no MDN.

Tipos de cores de ponto flutuante em <canvas>

CanvasRenderingContext2D, OffscreenCanvasRenderingContext2D, e ImageData objetos agora suportam formatos de pixel de ponto flutuante, além de formatos de ponto fixo de 8 bits.

Essa alteração permite aplicações de alta precisão, como:

  • Visualizações médicas.
  • Conteúdo de alto alcance dinâmico.
  • Espaços de cores de trabalho lineares.

Consulte Valores de cor do ponto flutuante da tela.

Políticas de isolamento de documentos

As políticas de isolamento de documento permitem que um documento habilite o isolamento entre origens para si mesmo, sem precisar usar os cabeçalhos de resposta Cross-Origin-Opener-Policy (COOP) ou Cross-Origin-Embedder-Policy (COEP), e independentemente do status de isolamento entre origens da página.

Veja também:

Suporte ao algoritmo de assinatura Ed25519 na API de Criptografia da Web

A API de Criptografia da Web agora dá suporte ao algoritmo de assinatura Ed25519.

Consulte Curvas Seguras no WebCrypto.

JavaScript Promise Integration (JSPI) em WebAssembly

JavaScript Promise Integration (JSPI) é uma API que permite que aplicativos WebAssembly se integrem a JavaScript Promises.

O JSPI permite que um programa WebAssembly atue como gerador de uma promessa e permite que o programa WebAssembly interaja com APIs portadoras de promessas.

Quando um aplicativo usa JSPI para chamar uma API de portador de promessa (JavaScript):

  • O código WebAssembly está suspenso.
  • O chamador original do programa WebAssembly recebe uma promessa que será cumprida quando o programa WebAssembly finalmente for concluído.

Veja js-promise-integration.

Dica de ramificação WebAssembly

Para melhorar o desempenho do código WebAssembly compilado, as dicas de ramificação são usadas para informar ao mecanismo que uma instrução de ramificação específica provavelmente seguirá um caminho específico.

Isso permite que o mecanismo tome melhores decisões para o layout do código e a alocação de registro.

Consulte Dicas de ramificação.

Restrinja os tipos de atributos e argumentos que SVGMatrix, SVGRect e SVGPoint aceitam

Definir atributos e argumentos de SVGMatrix, SVGRect e SVGPoint como Infinity ou NaN agora não é permitido.

As configurações, atributos ou argumentos para esses valores agora gerarão uma exceção JavaScript.

Veja a API SVG no MDN.

API getComposedRanges de Seleção e direction

A API Selection agora dá suporte à seguinte propriedade e método:

  • Selection.direction retorna a direção da seleção como none, forward, ou backward.
  • Selection.getComposedRanges() Retorna uma lista de 0 ou 1 objetos compostosStaticRange .

Um composto StaticRange pode cruzar os limites do DOM de sombra, ao contrário dos Range objetos.

Por exemplo:

const range = getSelection().getComposedRanges({ shadowRoots: [root] });

Para garantir que árvores de sombra desconhecidas não sejam expostas acidentalmente, se a seleção de texto cruzar um limite de raiz de sombra que não é fornecido na shadowRoots propriedade, os StaticRangepontos finais retornados estarão fora dessa árvore de sombra.

Consulte Seleção: método getComposedRanges() no MDN.

WebGPU API

Associar externalTexture a GPUTextureView

Ao criar um GPUBindGroup ao usar o WepGPU, agora você pode vincular externalTexture a um GPUTextureViewarquivo .

Isso ajuda em cenários como ao usar a API WebGPU para pipelines de efeitos de vídeo. Ao permitir que um compatível GPUTextureView seja usado no lugar de um GPUExternalTexture, a lógica do sombreador é simplificada.

Consulte GPUExternalTexture no MDN.

Copiar buffers inteiros com copyBufferToBuffer()

O GPUCommandEncoder.copyBufferToBuffer() método facilita a cópia de buffers inteiros, permitindo que você omita os offsets parâmetros and size .

Consulte GPUCommandEncoder: método copyBufferToBuffer() no MDN.

Avaliações de origem

A seguir estão novas APIs experimentais que você pode experimentar em seu próprio site ativo por um tempo limitado.

Para saber mais sobre avaliações de origem, consulte Testar APIs e recursos experimentais usando avaliações de origem.

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

Novos testes de origem do Chromium

Pausar reprodução de mídia em iframes não renderizados

Expira em 27 de janeiro de 2026.

A media-playback-while-not-visible política de permissão pausa qualquer mídia que está sendo reproduzida por iframes que atualmente não são renderizados em quadros não permitidos. Isso se aplica sempre que a propriedade CSS do display iframe é definida como none ou quando a visibility propriedade é definida como hidden ou collapse.

Atualmente, há suporte para AudioContexts elementos de mídia. HTMLMediaElements

Versões de avaliação de origem exclusivas do Microsoft Edge

Extensões de escopo do aplicativo Web

Expira em 31 de agosto de 2025

scope_extensions é um novo membro do manifesto do aplicativo Web que permite que os aplicativos Web estendam seu escopo para outras origens.

As extensões de escopo permitem que aplicativos Web que dependem de vários subdomínios e domínios de nível superior sejam apresentados como um único aplicativo Web.

{
  "name": "Example app",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    {
      "type": "type",
      "origin": "https://example.com"
    }
  ]
}

As origens listadas no scope_extensions membro devem confirmar que estão associadas ao aplicativo Web hospedando um arquivo de configuração chamado .well-known/web-app-origin-association. O arquivo deve listar a origem do aplicativo Web:

{
  "https://sample-app.com/": {
    "scope": "/"
  }
}
API de Informações de Aquisição

Expira em 30 de junho de 2025.

A API de Informações de Aquisição dá suporte à atribuição de aquisição 3P para PWAs que foram adquiridos por meio de uma loja de aplicativos ou diretamente do navegador.

Preterimento de Alto Contraste da MS

Expira em 9 de setembro de 2025.

Habilita a consulta de mídia CSS -ms-high-contrast herdada e a propriedade herdada -ms-high-contrast-adjust .

Consulte Preterindo o suporte para -ms-high-contrast e -ms-high-contrast-adjust.

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado por Chromium.org e usadas de acordo com os termos descritos na Licença Creative Commons Atribuição 4.0 Internacional.