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.

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
Esse recurso permite ancorar um elemento posicionado a uma âncora. Ele é especialmente útil ao mostrar pop-ups.
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
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
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 dedisplay
. - 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
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
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
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.
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.
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
API Event Timing (para INP)
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.