Interop 2025: mais um ano de melhorias na plataforma da Web

Publicado em 13 de fevereiro de 2025

Depois do grande sucesso da Interop 2024, o projeto volta hoje com um novo conjunto de áreas de foco para 2025. Não foi possível incluir todas as sugestões feitas neste ano, mas a lista final abrange toda a plataforma da Web, desde CSS até recursos relacionados ao desempenho.

As áreas de foco para 2025

  • Posicionamento de âncora
  • backdrop-filter
  • Core Web Vitals
  • Elemento <details>
  • Layout
  • Módulos
  • Navigation API
  • Eventos do ponteiro e do mouse
  • Remover eventos de mutação
  • @scope
  • scrollend evento
  • API Storage Access
  • text-decoration
  • URLPattern
  • API View Transition
  • WebAssembly
  • Compatibilidade com a Web
  • WebRTC
  • Modos de gravação

Além disso, assim como em anos anteriores, há um conjunto de áreas para investigação. Essas são áreas em que não temos informações ou testes suficientes para incluir como área de foco, mas o grupo acredita que algum trabalho precisa ser feito para que elas cheguem a um estágio em que possam ser incluídas.

  • Testes de acessibilidade
  • Testes da API Gamepad
  • Teste para dispositivos móveis
  • Testes de privacidade
  • WebVTT

Estamos animados com todos esses recursos e as melhorias que o projeto deste ano vai trazer para a plataforma. E, assim como no ano passado, o projeto vai disponibilizar um conjunto completo de recursos. Esta postagem compartilha mais informações sobre alguns dos recursos da lista, com links para mais informações.

Você pode acompanhar o painel Interop 2025 em wpt.fyi/interop-2025. À medida que as coisas forem tornadas disponíveis, elas vão aparecer na lista de base de 2025 no webstatus.dev.

As pontuações no início do projeto: Interop: 33, Investigations: 0, Chrome Canary: 91, Edge Dev: 88, Firefox Nightly: 52, Safari Technology Preview: 55.
Painel de Interop 2025 (em 13 de fevereiro de 2025).

CSS e interface

Vários dos recursos incluídos na interoperabilidade de 2025 são os que você marcou como importantes na pesquisa "Estado do CSS 2024". Elas vão ajudar você a criar experiências do usuário mais bonitas e com melhor desempenho.

Posicionamento de âncora

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

Esse recurso permite ancorar um elemento posicionado a uma âncora. Ele é especialmente útil ao mostrar pop-ups.

Uma âncora com um elemento posicionado.

Com esse recurso incluído na referência, fica muito mais fácil criar interfaces de usuário sem depender de bibliotecas de terceiros. Saiba mais na documentação de posicionamento de âncora e também no MDN: Posicionamento de âncora CSS.

Transições de visualização do mesmo documento

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

Também foram incluídas neste ano as transições de visualização, especificamente as transições de visualização do mesmo documento, e a propriedade CSS view-transition-class.

Saiba mais sobre transições de visualização em Transições de visualização do mesmo documento para aplicativos de página única e na documentação do MDN para transições de visualização.

A propriedade backdrop-filter

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 18.

Source

A propriedade backdrop-filter está disponível como referência desde setembro de 2024. Ele permite criar efeitos por trás do conteúdo. Por exemplo, para desfocar ou criar efeitos que você espera que estejam disponíveis apenas em um aplicativo gráfico.

Apesar de ser em grande parte interoperável, é possível notar nos testes com falhas de backdrop-filter que há bugs e problemas nessas implementações. Embora esses problemas não sejam um problema para todos, sabemos que muitos de vocês os encontram. Seria ótimo que esse recurso funcionasse muito bem.

O elemento <details>

O elemento <details> é um widget de revelação que pode ser expandido para mostrar mais conteúdo. O elemento <details> é amplamente disponível. No entanto, há vários recursos relacionados que foram adicionados recentemente para tornar o <details> mais útil.

  • Os pseudoelementos CSS ::marker e ::details-content.
  • Use content-visibility para alternar o conteúdo em vez de display.
  • A expansão automática do elemento <details> com correspondências de busca na página.
  • O atributo hidden="until-found", que oculta um elemento até que ele seja encontrado usando a pesquisa de página do navegador ou seja acessado diretamente seguindo um fragmento de URL.

A regra at-rule CSS @scope

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: 17.4.

Source

A regra @scope at-rule permite definir o escopo dos seletores para uma subárvore do DOM ou até mesmo selecionar entre um limite superior e inferior na árvore. Por exemplo, o CSS a seguir seleciona apenas elementos <img> dentro de um elemento com uma classe de .card.

@scope (.card) {
  img {
    border-color: green;
  }
}

No próximo exemplo, são usadas uma fronteira superior e uma inferior. O elemento <img> só é selecionado se estiver entre o elemento com uma classe de .card e também fora do elemento com uma classe de .card__content.

@scope (.card) to (.card__content) {
  img {
    border-color: green;
  }
}

Encontre mais exemplos de como usar @scope em Limitar o alcance dos seletores com a regra @scope CSS e na documentação @scope do MDN.

O evento scrollend

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari: not supported.

Source

Sem o evento scrollend, não há uma maneira confiável de detectar que uma rolagem foi concluída. O melhor que você pode fazer é usar setTimeout() para verificar se a rolagem foi interrompida por um período. Isso faz com que pareça mais um evento de rolagem pausada, não um evento de rolagem encerrado.

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Com o evento scrollend, o navegador faz toda essa avaliação difícil para você.

document.onscrollend = event => {
  // ...
}

Confira mais exemplos em Scrollend, um novo evento JavaScript e também na documentação do MDN para scrollend.

A propriedade text-decoration

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

A propriedade text-decoration é uma abreviação de text-decoration-line, text-decoration-color, text-decoration-style e text-decoration-thickness. Ela é considerada amplamente disponível, mas no Safari, a única propriedade de abreviação sem prefixo que funciona é text-decoration-line. É isso que será abordado em 2025.

Modos de gravação

A propriedade CSS writing-mode tem vários valores possíveis, muitos dos quais são projetados para definir scripts que aparecem verticalmente. No entanto, às vezes, você quer posicionar o texto verticalmente como parte de um design, em vez de por motivos de suporte ao idioma. Os valores sideways-lr e sideways-rl foram criados para isso, mas sofreram com a baixa compatibilidade do navegador. Isso será corrigido em 2025.

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

Além disso, as propriedades CSS lógicas overflow-inline e overflow-block são incluídas. Eles permitem controlar o que acontece quando o conteúdo transborda as caixas, independentemente do modo de gravação.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 69.
  • Safari: not supported.

Source

Core Web Vitals

As Web Vitals podem ajudar a quantificar a experiência do seu site e identificar oportunidades de melhoria. O objetivo da iniciativa é simplificar o cenário e ajudar os sites a se concentrar nas métricas mais importantes, as Core Web Vitals.

A Interop 2025 inclui as métricas de maior exibição de conteúdo (LCP) e Interaction to Next Paint (INP) implementando a API LargestContentfulPaint e a API Event Timing em todos os navegadores. A métrica Cumulative Layout Shift (CLS) não está no escopo.

API LCP

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

API Event Timing (para INP)

Browser Support

  • Chrome: 96.
  • Edge: 96.
  • Firefox: not supported.
  • Safari: not supported.

Source

WebAssembly (Wasm)

A API WebAssembly permite carregar o código do WebAssembly, um formato de instrução binária portátil. Ele permite que você faça coisas como executar um aplicativo de blog inteiro, incluindo todos os requisitos do servidor, no navegador.

Este ano, o trabalho vai se concentrar nos seguintes recursos:

  • Strings internas do JavaScript: para fazer com que as funções de string integradas do WebAssembly espelhem um subconjunto da API String do JavaScript para que ela possa ser chamada sem o código de união do JavaScript.
  • Integração de buffers redimensionáveis: para integrar o WebAssembly a um código JavaScript que usa buffers redimensionáveis.

Remoção de recursos

Este ano, o projeto inclui a remoção da plataforma. Os eventos de mutação foram descontinuados e substituídos pela API Mutation Observer, muito mais eficiente e disponível em todos os lugares. O Chrome removeu esses eventos no Chrome 126, e essa área de foco é para removê-los de todos os navegadores.

Para entender o histórico e por que esses eventos estão sendo removidos, leia Os eventos de mutação serão removidos do Chrome.

Saiba mais

As descrições da lista completa de recursos podem ser encontradas no README do projeto. Além disso, leia as postagens das outras empresas que estão trabalhando na Interop 2025.