Novidades na interface da Web

Bramus
Una Kravets

Publicado em: 1º de julho de 2026

No Google I/O 2026, compartilhamos várias atualizações que estão chegando à plataforma de interface da Web. Desde o respeito às preferências do usuário até a implementação de interações naturais, orientação de navegação, redução de desordem e adaptação a vários formatos, a Web moderna oferece aos desenvolvedores ferramentas incrivelmente poderosas para criar experiências do usuário táteis e de alta qualidade.

Confira um resumo completo de todos os recursos mencionados na sessão "Novidades na interface da Web", estruturado pelo nosso conjunto principal de princípios de UX.

Parte 1: respeitar as preferências do usuário

A personalização é fundamental para a usabilidade da Web. As APIs da Web modernas facilitam a adaptação automática às escolhas do usuário no nível do sistema. Embora esses conceitos pareçam elementares e já sejam discutidos há anos, há algumas novas APIs e padrões que facilitam a criação dessa personalização dinâmica.

1. contrast-color()

A função CSS contrast-color() usa uma cor de entrada e retorna automaticamente black ou white, dependendo de qual tem o maior contraste com a cor de entrada com base no algoritmo de contraste mínimo AA das WCAG. Isso garante a legibilidade sem manter manualmente pares de cores de texto e plano de fundo.

Browser Support

  • Chrome: 147.
  • Edge: 147.
  • Firefox: 146.
  • Safari: 26.

Source

Saiba mais sobre contrast-color()

2. light-dark()

A função CSS light-dark() permite especificar dois valores diferentes (cores ou imagens) para uma propriedade, um para o modo claro e outro para o modo escuro, em uma única declaração. O navegador seleciona automaticamente a cor de contraste correta com base no color-scheme ativo, que precisa estar definido como light, dark ou light dark em :root ou um elemento pai.

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

A novidade do light-dark() é que ele não se limita mais apenas a valores de cor. A partir do Chrome 150, ele também aceita dois valores de imagem.

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: 150.
  • Safari: not supported.

3. Funções personalizadas de CSS (@function)

A regra-at @function permite definir funções personalizadas e reutilizáveis diretamente no CSS nativo. Ele pode aceitar propriedades personalizadas de escopo local como argumentos, fazer cálculos e retornar valores usando o descritor result, reduzindo a necessidade de pré-processadores.

Browser Support

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

Source

Combinado com consultas de estilo de contêiner e a função if() do CSS, é possível criar uma função --light-dark() personalizada que funcione com qualquer tipo de valor, conforme mostrado nesta demonstração:

4. Consultas de estilo de contêiner

Parte das consultas de contêiner CSS, as consultas de estilo permitem que os desenvolvedores apliquem estilos a elementos descendentes com base nos valores de propriedade personalizada calculados de um contêiner principal, permitindo componentes dinâmicos sem exigir contenção de tamanho explícita.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 151.
  • Safari: 18.

Nesta demonstração, as consultas de estilo são usadas para definir as cores com base em uma propriedade personalizada --theme.

@container style(--theme: primary) {
  .app-card {
    --bg-light: #fdf2f8; 
    --bg-dark: #ff91d3;  
    --neon-glow: #f472b6;
    --btn-light: #be185d; 
    --btn-dark: #fbcfe8;  
    
    --text-on-light: #500732;
    --text-on-dark: #fff1f2;  
  }
}

@container style(--theme: accent) {
  .app-card {
    --bg-light: #f3e8ff;
    --bg-dark: #4c1d95;  
    --neon-glow: #d8b4fe;
    --btn-light: #7e22ce; 
    --btn-dark: #c084fc;  
    
    --text-on-light: #2e1065; 
    --text-on-dark: #faf5ff;  
  }
}

@container style(--theme: success) {
  /* … */
}

Saiba mais sobre consultas de estilo

5. Função if() do CSS

A função CSS if() traz a lógica condicional inline diretamente para os valores de propriedades CSS. Ele avalia uma série de condições separadas por ponto e vírgula (consultas de estilo, de mídia ou de recursos) e permite definir valores diferentes associados à primeira condição verdadeira, com um retorno else opcional.

Browser Support

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

Source

Na demonstração anterior, a função if() foi usada para criar uma cor de contraste temática com base na saída da função contrast-color().

--contrast-color: contrast-color(var(--card-bg));
color: if(
    style(--contrast-color: white): var(--text-on-dark);
    else: var(--text-on-light)
);

6. @supports at-rule()

A função at-rule() do CSS para uso com @supports permite que os desenvolvedores detectem se um navegador reconhece uma regra at específica, como @starting-style ou @view-transition.

Por exemplo, para verificar se há suporte para @function, use da seguinte forma:

@supports at-rule(@function) {
  /* Code for browsers that support @function goes here */
}

Usar at-rule() permite apenas verificar o suporte básico da própria regra-at e não pode ser usado para testar descritores, prelúdios ou blocos de regra-at completos específicos. Há soluções alternativas disponíveis para detectar recursos como consultas fixadas ou de estilo.

Saiba mais sobre @supports at-rule

7. <meta name="text-scale">

A metatag HTML text-scale permite que a página tenha a escala de tamanho de fonte inicial do elemento raiz <html> proporcional às configurações de escala de texto no nível do SO e do navegador, o que é especialmente importante para plataformas móveis.

Browser Support

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

Source

Quando aplicado, o tamanho da fonte no elemento html é determinado pelo sistema operacional. Portanto, não é necessário definir um font-size base. Se você usar comprimentos com unidades relativas, como em e rem, os valores de pixel calculados serão baseados nesse tamanho de fonte.

<meta name="text=scale" value="scale">
<style>
html {
  /* Don't set a base font-size here! */
}
</style>

Na guia de renderização do DevTools, é possível emular o tamanho de fonte preferido. Use o menu suspenso para mudar o valor.

Saiba mais sobre <meta name=text-scale>

Parte 2: implementar interações naturais

Movimentos físicos intuitivos e gestos naturais são essenciais para que as experiências na Web pareçam tão táteis quanto os aplicativos nativos. E o CSS moderno facilita isso.

8. Função de suavização linear()

A função de suavização linear() permite criar curvas de transição complexas e personalizadas (como saltos, molas ou ultrapassagens elásticas) interpolando linearmente entre um número ilimitado de pontos de progresso especificados.

Browser Support

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 17.2.

Source

Na demonstração a seguir, linear() é usado para dar à caixa de diálogo uma transição natural ao ser mostrada ou ocultada.

Saiba mais sobre linear()

9. @starting-style

A regra at @starting-style do CSS define os valores iniciais das propriedades de um elemento que você quer fazer a transição quando ele é renderizado pela primeira vez no DOM ou quando o display muda de none para um valor visível, permitindo transições de entrada suaves.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

Na demonstração anterior, isso foi usado para animar o <dialog> quando ele ficou visível pela primeira vez.

10. transition-behavior: allow-discrete

A propriedade transition-behavior (geralmente usada como allow-discrete no atalho transition) permite fazer a transição de propriedades discretas, como display ou overlay, garantindo que os elementos permaneçam visíveis durante as animações de saída antes de serem ocultados.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

11. sibling-index() e sibling-count()

As funções CSS sibling-index() e sibling-count() retornam números inteiros que representam a posição de base 1 de um elemento entre os elementos irmãos e a contagem total de elementos irmãos, respectivamente. São perfeitos para calcular atrasos de animação escalonados dinamicamente em CSS sem JavaScript.

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Browser Support

  • Chrome: 138.
  • Edge: 138.
  • Firefox: not supported.
  • Safari: 26.2.

Source

Nesta demonstração, o conteúdo da caixa de diálogo é escalonado usando o sibling-index() no animation-delay

dialog[open] > * {
  animation:
    content-entry 0.6s var(--spring) forwards;
  
  /* 0.2s delay for the first item, then staggering by 0.05s via sibling-index()
  */
  animation-delay:
    calc(sibling-index() * 0.05s + 0.2s);
}

12. Dispensar caixa de diálogo com um toque (atributo closedby)

O atributo closedby no elemento <dialog> (com valor any) permite usar o comportamento declarativo de "descarte leve", fechando automaticamente as caixas de diálogo modais ao clicar fora delas ou pressionar ESC, sem exigir JavaScript personalizado.

Browser Support

  • Chrome: 134.
  • Edge: 134.
  • Firefox: 141.
  • Safari: not supported.

Source

Você pode testar na demonstração anterior.

13. corner-shape

A propriedade abreviada experimental corner-shape permite que os desenvolvedores modifiquem cantos arredondados (de border-radius) para criar formas visuais personalizadas, como bevel, scoop, notch ou squircle (via superellipse()). Bordas, sombras e contornos de foco se ajustam automaticamente à forma.

Browser Support

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

Source

Parte 3: oferecer navegação guiada

Orientar a jornada do usuário ajuda a manter o contexto e entender o fluxo do aplicativo, eliminando recarregamentos desorientadores. É possível fazer isso de algumas maneiras, incluindo com transições de visualização, que receberam algumas atualizações recentes.

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

Parte da API View Transition, as transições no mesmo documento oferecem um mecanismo para animar entre estados do DOM em aplicativos de página única (SPAs) capturando snapshots e fazendo a transição deles usando CSS.

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

Saiba mais sobre as transições de visualização no mesmo documento.

15. Transições de visualização entre documentos

Estende a API View Transition para aplicativos de várias páginas (MPAs, na sigla em inglês), permitindo criar transições animadas e fluidas ao navegar entre diferentes documentos, combinando elementos com o mesmo view-transition-name em várias páginas.

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: not supported.
  • Safari: 18.2.

Source

Saiba mais sobre as transições de visualização entre documentos

16. Transições de visualização no escopo do elemento

Introduzidas no Chrome 147, as transições de visualização no escopo do elemento permitem executar uma transição de visualização apenas em uma subárvore DOM específica (usando element.startViewTransition()), mantendo o restante da página ativo e interativo.

Browser Support

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

Ao iniciar uma transição de visualização no escopo do elemento, ela é executada isoladamente: ela só verifica essa subárvore em busca de elementos com um view-transition-name, e o pseudoelemento ::view-transition é injetado na própria raiz do escopo. O isolamento é possível graças à aplicação automática de view-transition-scope: all.

Isso permite que várias transições de visualização sejam executadas ao mesmo tempo, bem como o aninhamento delas: enquanto os itens dessas listas são embaralhados, você também pode trocar as próprias listas.

Além disso, os pseudoelementos de grupo são aninhados automaticamente, e o estouro do pseudoelemento filho do grupo envolvente é cortado quando necessário.

As transições de visualização com escopo são perfeitas para microinterações e transformações com estado na página, oferecendo ao usuário mais contexto quando ocorre uma mudança visual. Essa é uma ótima maneira de melhorar a usabilidade do aplicativo e também a aparência e a sensação dele. Essas pequenas coisas fazem uma grande diferença.

Saiba mais sobre as transições de visualização no escopo do elemento

17. Transições de visualização em duas fases

Esse é um recurso experimental que inicia imediatamente uma transição de visualização entre documentos sem esperar que o novo DOM esteja pronto. Primeiro, ele faz a transição para uma tela de esqueleto intermediária ou uma interface de carregamento antes de continuar com a transição de visualização entre documentos.

Saiba mais sobre as transições de visualização em duas fases

18. Animações de rolagem

As animações de rolagem vinculam o progresso de uma animação CSS diretamente à posição de rolagem de um contêiner de rolagem, permitindo que os desenvolvedores criem interfaces baseadas em rolagem, como efeitos de paralaxe eficientes e indicadores de rolagem.

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

19. Animações acionadas por rolagem

As animações acionadas por rolagem são uma novidade no Chrome. As animações acionadas por rolagem acionam uma animação CSS padrão baseada em tempo quando um limite de rolagem é cruzado (usando timeline-trigger para definir o acionador e animation-trigger para reproduzir), oferecendo uma alternativa declarativa ao IntersectionObserver.

Browser Support

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

O mecanismo subjacente para animações acionadas por rolagem são acionadores de linha do tempo, que podem estar ativos ou inativos.

.element {
  timeline-trigger:
    --t
    view()
    contain 25% contain 75% / entry 105% exit -5%
  ;
}

Ative o visualizador na demonstração a seguir para ver o que está acontecendo: o primeiro intervalo é o de ativação e determina quando o gatilho é ativado. O segundo intervalo é o período ativo, que determina por quanto tempo ele deve permanecer ativo.

Saiba mais sobre animações acionadas por rolagem

20. scroll-target-group: auto

Agora é possível criar um scroll-spy CSS nativo que destaca automaticamente os links de navegação com base na posição de rolagem do usuário. Ao definir scroll-target-group: auto em uma lista de navegação, o navegador define automaticamente aria-current="true" e aplica a pseudoclasse :target-current ao link ativo. Em seguida, :target-current pode ser usado para estilizar ainda mais os links ativos.

Browser Support

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

Source

Browser Support

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

Source

Saiba mais sobre o scroll-spy do CSS com scroll-target-group

21. Opção de contêiner scrollIntoView()

O método scrollIntoView() ganha uma opção container. Definir target.scrollIntoView({container: 'nearest'}) limita a rolagem ao scroller ancestral mais próximo, em vez de fazer com que ele suba até o topo, evitando a rolagem desorientadora no nível da página.

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

Use a caixa de seleção nesta demonstração para ativar e desativar a opção:

Saiba mais sobre container: "nearest"

22. Rolagem programática aguardável

Todos os métodos de rolagem programática (como scroll(), scrollTo() e scrollIntoView()) agora retornam uma promessa. Isso permite que os desenvolvedores await a conclusão das animações de rolagem suave antes de executar a lógica subsequente (como adicionar um efeito de destaque).

Browser Support

  • Chrome: 1.
  • Edge: 79.
  • Firefox: 1.
  • Safari: 3.

Source

Na demonstração a seguir, você pode conferir o efeito em ação: primeiro, o elemento é rolado para a visualização e, depois, um efeito de destaque é adicionado a ele.

Parte 4: maximize o conteúdo e reduza o ruído

Uma das experiências mais frustrantes na Web é esperar ver um conteúdo e ser bloqueado por pop-ups ou banners intrusivos. Priorize a área de conteúdo eliminando a poluição visual e as bordas do aplicativo, movendo as ações secundárias para trás da interface em camadas.

23. Consultas de estado de rolagem (scrolled)

Parte das consultas de contêiner CSS, as consultas scroll-state permitem estilizar descendentes com base no estado de rolagem de um contêiner (com container-type: scroll-state). A consulta scrolled (por exemplo, scroll-state(scrolled: bottom)) detecta a direção da rolagem relativa mais recente, permitindo padrões como a "barra oculta".

Browser Support

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

Saiba mais sobre o padrão "Hidey Bar".

24. Consultas de contêiner ancoradas

O posicionamento de âncora do CSS inclui consultas de contêiner ancoradas, que permitem verificar qual posição de substituição (por exemplo, fallback: bottom ou fallback: flip-block) está ativa em um elemento posicionado por âncora, permitindo atualizações dinâmicas para estilizar um elemento posicionado por âncora (como setas de dica de ferramenta).

Browser Support

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

Na demonstração a seguir, um popover posicionado por âncora se reposiciona com base na posição de fallback e na posição na janela de visualização usando consultas de contêiner ancoradas. Quando a dica aparece acima do invocador, ela é animada de baixo para cima, da origem. Quando está abaixo do invocador, ele anima de cima para baixo.

25. CSS border-shape

A propriedade border-shape permite definir bordas não retangulares usando a mesma sintaxe de forma que clip-path. Ao contrário do corte, o border-shape mantém bordas, contornos e sombras visualmente alinhados com a forma personalizada. Ele também vai além dos recursos do corner-shape, já que o border-shape é muito mais flexível.

Browser Support

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

26. Função shape() do CSS

A função shape() do CSS permite definir caminhos geométricos complexos inline em CSS. Ele pode ser usado com propriedades como clip-path, border-shape ou shape-outside para criar formas orgânicas e não retangulares que o conteúdo pode acompanhar.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Safari: 18.4.

Source

27. Posicionamento fixo por eixo

Graças a uma mudança recente na especificação de estouro que permite que os contêineres sejam um rolador para apenas um eixo, o posicionamento fixo agora pode rastrear dois contêineres de rolagem diferentes (um para cada eixo) simultaneamente. Isso faz com que uma primeira coluna e uma linha superior fixas em uma tabela funcionem como esperado, mesmo dentro de contêineres de rolagem de eixo único.

Browser Support

  • Chrome: 56.
  • Edge: 16.
  • Firefox: 32.
  • Safari: 13.

Esse recurso está disponível para testes no Chrome 148 com a flag "Recursos experimentais da plataforma da Web" ativada.

Saiba mais sobre position: sticky por eixo

Parte 5: adaptar ao formato

Uma das coisas mais valiosas da Web é a flexibilidade. Os usuários podem navegar na Web em vários dispositivos, cada um com mecanismos de interação próprios. Os layouts precisam se adaptar ao dispositivo e ao método de entrada, seja um teclado virtual aberto ou alvos de toque ativos. Manter o formato em mente ao criar para a Web dá ao seu site ou web app um toque extra de refinamento e alinha as expectativas do usuário.

28. Gestos de rolagem esticada (áreas que podem ser deslizadas)

Um exemplo de adaptação ao formato é a capacidade de usar interações baseadas em gestos e deslizar na Web para dispositivos móveis. É possível usar roladores para conseguir alguns desses efeitos, mas nem sempre é uma abordagem intuitiva.

A equipe do Chrome está trabalhando em uma solução declarativa proposta, em discussão com o grupo da comunidade OpenUI, que permite criar áreas deslizáveis nativas orientadas por gestos (por exemplo, listas do Gmail deslizáveis ou menus laterais de deslizar para dispensar) usando overscrollcontainer e invocadores de comandos, funcionando naturalmente em toque e rolagem.

Saiba mais sobre gestos de rolagem esticada

29. HTML no Canvas

A API HTML no Canvas é uma grande mudança de paradigma, permitindo que os desenvolvedores coloquem elementos DOM reais dentro de um <canvas> (usando o atributo layoutsubtree). Esses elementos permanecem totalmente pesquisáveis, acessíveis e compatíveis com recursos do navegador, como o preenchimento automático, permitindo que os shaders WebGL/WebGPU interajam com eles de forma nativa.

Rodada relâmpago

Uma olhada rápida em alguns outros recursos poderosos que impulsionam a Web.

30. Movimentação que preserva o estado do DOM (moveBefore())

O método moveBefore() do DOM permite redefinir o elemento pai dos nós do DOM (por exemplo, reproduzir vídeos, iframes ou entradas focadas) sem destruir o estado deles ou acionar recarregamentos.

Isso significa que os vídeos continuam sendo reproduzidos, os iframes não são recarregados, as animações CSS não são reiniciadas e os campos de entrada mantêm o foco enquanto você os reestrutura no layout.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 144.
  • Safari: not supported.

Source

Saiba mais sobre moveBefore()

31. CSS text-fit

text-fit é uma propriedade CSS experimental que dimensiona dinamicamente o tamanho da fonte para ajustar precisamente as linhas de texto à largura exata do elemento que as contém (por exemplo, text-fit: grow per-line-all).

Saiba mais sobre text-fit

32. CSS text-box (text-box-trim e text-box-edge)

A propriedade text-box (e suas formas abreviadas text-box-trim e text-box-edge) corta o espaço vertical (entrelinhamento) acima e abaixo do texto, garantindo o alinhamento e o centralização vertical perfeitos.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: behind a flag.
  • Safari: 18.2.

Source

Saiba mais sobre text-trim

33. Decorações de lacuna do CSS

As decorações de lacuna CSS trazem column-rule para grade e flexbox e introduzem uma nova propriedade row-rule, permitindo que os desenvolvedores estilizar os espaçamentos entre linhas e colunas. Não é mais necessário mexer com bordas ou pseudoelementos para estilizar as regras entre as linhas e colunas.

Browser Support

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

Saiba mais sobre as decorações de lacuna do CSS

34. Unidades de viewport com reconhecimento de barra de rolagem (vw, vh etc.)

Unidades de viewport, como vw e vh, subtraem automaticamente o tamanho das barras de rolagem (se garantidas como visíveis, usando overflow-y: scroll ou scrollbar-gutter: stable declarados em :root), evitando o estouro horizontal acidental ao definir elementos como 100vw.

Browser Support

  • Chrome: 20.
  • Edge: 12.
  • Firefox: 19.
  • Safari: 6.

Saiba mais sobre unidades de viewport com reconhecimento de barra de rolagem

35. Acesso a pseudo-elementos em JavaScript

As APIs da Web agora expõem pseudoelementos CSS (como ::before ou ::after) para JavaScript.

É possível recuperar uma instância CSSPseudoElement usando Element.pseudo(type) e verificar qual pseudoelemento acionou um evento usando Event.pseudoTarget.

Browser Support

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

Saiba mais sobre CSSPseudoElement

Conclusão

É isso por hoje em Novidades na interface da Web. Esperamos que você aproveite esses recursos e crie interfaces incríveis com eles. Até o ano que vem.