Novidades na Web

Rachel Andrew

Publicado em: 20 de maio de 2025

No Google I/O 2025, o discurso principal "Novidades na Web" compartilhou todos os anúncios da Baseline, além de mostrar alguns dos recursos que passaram a fazer parte da Baseline este ano. Foi um ano incrível para a Web e para a Baseline. Esta postagem é um resumo de tudo o que foi mencionado, com todos os links para saber mais.

O painel da plataforma da Web e os recursos da Web

Em 2024, anunciamos o lançamento inicial do painel da plataforma da Web, que usa o conjunto de dados de recursos da Web para que você possa conhecer todos os recursos que fazem parte do Baseline.

Os dados de recursos da Web agora estão completos, com todos os recursos da plataforma mapeados. À medida que novos recursos são adicionados ao Baseline todos os meses, os dados são atualizados, e tudo isso é mostrado no painel.

Ferramentas para ajudar você a descobrir sua própria meta de valor de referência

Embora você possa basear sua política de suporte a navegadores na meta móvel da Base amplamente disponível, como a agência do Reino Unido Clearleft, também é possível adotar uma meta fixa com base em um ano da Base. Agora você pode usar seus próprios dados de usuários, além dos dados de recursos da Web, para determinar a melhor meta para você.

No ano passado, no I/O, anunciamos que a RUMvision implementaria o Baseline no produto dela, e essa integração já está disponível.

Como ele usa seus dados de RUM, ajuda você a identificar qual ano de valor de referência adotar com base nesses dados, e não em uma média global. Ela também pode ajudar você a saber se a opção "Base ampla" faz sentido para você.

Você também pode usar os dados do Google Analytics para ver claramente qual porcentagem dos seus usuários é compatível com cada meta de valor de referência usando o novo Verificador de valor de referência do Google Analytics.

Essas são apenas duas de uma crescente coleção de ferramentas que ajudam você a mapear seus dados de usuários reais para a linha de base.

O Grupo da Comunidade DX na Web lançou recentemente uma extensão para o Netlify que mostra suporte para diferentes anos de linha de base e amplamente disponível nos seus sites para ajudar você a decidir o que segmentar nas ferramentas de build. Em breve, vamos lançar integrações com o produto Observatory RUM da Cloudflare e com a Contentsquare.

Integrar os dados com suas próprias ferramentas

Os dados de recursos da Web são abertos e estão disponíveis para suas próprias integrações. Estamos tentando facilitar esse processo.

Use a API Web Platform Dashboard ou consuma os dados de recursos da Web diretamente do pacote npm.

Agora é possível mapear versões de navegadores para uma meta de valor de referência usando o módulo baseline-browser-mapping do W3C WebDX Community Group. Esse módulo pode ser usado em um ambiente JavaScript do lado do servidor ou baixando arquivos JSON ou CSV atualizados diariamente do repositório.

Esses dados incluem mapeamentos não apenas para o conjunto principal de navegadores de referência, mas também para navegadores downstream, como Samsung Internet, Opera, UC Browser e Android WebView.

Saiba se os recursos são compatíveis com sua meta de base

As informações de linha de base agora estão na maioria das páginas do MDN e do Can I Use, além de poderem ser encontradas no painel da plataforma da Web e em artigos no web.dev e no CSS Tricks. No entanto, tudo isso exige que você procure suporte. Seria muito mais útil ter informações de baseline mostradas no seu ambiente de desenvolvimento integrado enquanto você programa e como parte de todas as outras ferramentas que você usa.

Temos o prazer de informar que muitas ferramentas importantes agora têm suporte à Baseline integrado ou fácil de integrar.

browserslist-config-baseline

Muitas ferramentas, como Babel e PostCSS, usam o browserslist para determinar quais navegadores são compatíveis.

Junto com o WebDX CG e membros da comunidade, a equipe do Chrome ajudou a lançar uma nova ferramenta chamada browserslist-config-baseline. Isso permite configurar seus destinos do browserslist em termos do Baseline, como amplamente disponível ou anos do Baseline.

Assim, qualquer ferramenta que use um destino do Browserslist pode ser expressa em termos de Baseline.

Saiba mais em Usar o valor de referência com o browserslist.

Valor de referência em linters: ESLint e Stylelint

Recentemente, foi possível usar o Baseline com linters com algumas ferramentas novas no espaço do linter, começando com ESLint para CSS.

O ESLint do Baseline tem uma regra use-baseline. Você pode definir isso como sua meta de base preferida, e ela vai avisar quando você usar recursos mais recentes do que sua meta. Você pode escolher como resolver esses avisos: substituindo o recurso por primitivos ou suprimindo o aviso do linter, que é uma solução perfeitamente válida quando você sabe que está usando um recurso de ponta com segurança, por exemplo, se for um aprimoramento progressivo.

Por padrão, o ESLint não vai avisar se recursos mais recentes forem usados em blocos @supports, já que navegadores sem suporte não os avaliam de qualquer forma.

Para suas necessidades de linting de HTML, há também um plug-in da comunidade chamado html-eslint.

O Stylelint oferece suporte oficial a um plug-in chamado stylelint-plugin-use-baseline. Essa regra se comporta como a regra do ESLint para CSS, mas é executada no Stylelint em vez disso.

Muitos linters também têm plug-ins de IDE, para que você receba feedback imediato sobre o status da linha de base durante a programação por meio de sublinhados ondulados.

Comparação no VS Code e no JetBrains WebStorm

Muitas IDEs já oferecem suporte a uma maneira de passar o cursor sobre um recurso no editor e ver a lista de versões de navegadores compatíveis.

Mas pode ser difícil entender se esse recurso é realmente seguro para uso. É preciso analisar mentalmente se há algum navegador principal ausente nessa lista e qual é a versão mais recente do navegador.

Para corrigir esse problema, fizemos uma parceria com o ambiente de desenvolvimento integrado (IDE) mais usado por milhões de desenvolvedores da Web, o VS Code, para integrar os dados de linha de base diretamente nesses cards flutuantes.

Agora, basta passar o cursor sobre um recurso para saber se ele é considerado Baseline e por quanto tempo, ou se há navegadores principais que ainda não o implementaram totalmente.

Os recursos compatíveis incluem propriedades CSS, elementos HTML e atributos HTML. Saiba mais em O Visual Studio Code agora oferece suporte ao Baseline.

Essa integração significa que qualquer IDE baseado no VS Code também vai se beneficiar desses cards flutuantes.

Além disso, temos o prazer de anunciar que a JetBrains está implementando cards flutuantes no ambiente de desenvolvimento integrado JavaScript e TypeScript do WebStorm.

A Web está melhorando mais rápido do que nunca

Esperamos que o Baseline ajude você a aproveitar o fato de que a Web interoperável está melhorando mais rápido do que nunca.

Use o painel da plataforma da Web para conferir todos os recursos que se tornaram Baseline Newly disponíveis nos últimos 12 meses, desde o Google I/O 2024.

Há também vários recursos que você pode ter certeza de que estarão disponíveis em breve, já que estão incluídos no projeto Interop 2025. Leia sobre todos os recursos incluídos em Interop 2025: mais um ano de melhorias na plataforma da Web.

Modos de escrita na horizontal

Já vimos um recurso se tornar recém-disponível na linha de base, os valores sideways-rl e sideways-lr para a propriedade writing-mode do CSS. Se você estiver usando um modo de escrita vertical apenas para fins de layout, provavelmente precisará dos valores laterais.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Posicionamento da âncora

O posicionamento da âncora foi lançado no Chrome 125. Ele permite vincular a posição de um elemento a uma âncora, por exemplo, ao abrir uma dica de ferramenta com um botão.

Agora ele está incluído no Interop 2025, então deve entrar na Baseline este ano.

Core Web Vitals: LCP e INP

API LCP

API Event Timing (para INP)

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

O Interop 2025 inclui as métricas Maior exibição de conteúdo (LCP) e Interaction to Next Paint (INP) ao implementar a API LargestContentfulPaint e a API Event Timing em todos os navegadores.

Melhorias no elemento <details>

O elemento <details> já está disponível para todos no Baseline. Ele foi incluído no Interop 2025 porque há vários recursos que tornam os widgets de divulgação com <details> mais úteis.

O elemento <details> contém um elemento <summary>, que é a parte visível na página quando o elemento <details> está recolhido. Fora do <summary> está o conteúdo do elemento <details>, que fica oculto até que o usuário clique no resumo.

Uma das coisas que está sendo feita para interoperabilidade durante o Interop 2025 é ocultar o conteúdo usando content-visibility em vez de display. Isso significa que, se não for expandido, o conteúdo não será renderizado.

O pseudo-elemento ::marker também faz parte do trabalho do Interop 2025. O pseudoelemento ::marker permite estilizar o triângulo de abertura do elemento <summary>.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Em seguida, outro pseudoelemento: ::details-content.

::details-content representa o conteúdo, ou seja, a parte do elemento details que se expande e se contrai, permitindo que você a estilize.

[open]::details-content {
  border: 5px dashed hotpink;
}

Também há algumas melhorias interessantes, como a expansão automática do elemento <details> com correspondências de pesquisa na página e a inclusão do valor until-found do atributo HTML hidden na linha de base recém-disponível. Isso oculta um elemento até que ele seja encontrado usando a pesquisa "Localizar na página" do navegador ou acessado diretamente seguindo um fragmento de URL.

CSS @scope

A regra @scope do CSS permite limitar o alcance dos seus seletores. Ao definir uma raiz de escopo com @scope, todas as regras de estilo aninhadas dentro da at-rule só se aplicam a essa árvore DOM.

Por exemplo, se você quiser segmentar apenas elementos <img> dentro de um elemento com uma classe de .card, .card se tornará a raiz de escopo.

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

Saiba mais em Limitar o alcance dos seletores com a regra @scope do CSS.

scrollend

Outro recurso que reduz a complexidade e melhora as interfaces de rolagem é o scrollend. Sem o evento scrollend, não há uma maneira confiável de detectar que uma rolagem foi concluída.

// before scrollend
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 (link em inglês).

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

Por último, mas não menos importante, as transições de visualização fazem parte do Interop 2025. O trabalho envolve transições de visualização no mesmo documento, então aquelas para aplicativos de página única e também classes de transições de visualização.

Acompanhe o painel do Interop 2025 (link em inglês) para ver como o projeto está se desenvolvendo ao longo do ano.

Os recursos incluídos no Interop 2025 não serão as únicas coisas que farão parte do Baseline este ano, mas a inclusão deles nos projetos é um bom sinal de que eles são priorizados e serão lançados em breve.

Estamos apenas começando

Este foi um ano incrível para o Baseline, e avançamos muito desde os anúncios do ano passado. Agora, a inclusão de dados de recursos da Web está concluída. Isso abriu as portas e permitiu a criação de ferramentas para desenvolvedores. Estamos apenas começando. Se você tiver um produto ou uma ferramenta de código aberto que se beneficiaria da inclusão desses dados, entre em contato com a gente.

Fique de olho no web.dev, porque vamos continuar publicando anúncios sobre novas ferramentas e tutoriais para ajudar você a aproveitar tudo o que a Web tem a oferecer.