Novidades do Chrome 142

Rachel Andrew

Publicado em: 28 de outubro de 2025

O Chrome 142 está sendo lançado agora, e esta postagem compartilha alguns dos principais recursos da versão. Leia as notas da versão completa do Chrome 142.

Destaques desta versão:

Pseudoclasses :target-before e :target-after

Essas pseudoclasses correspondem a marcadores de rolagem que estão antes ou depois do marcador ativo (correspondendo a :target-current) no mesmo grupo de marcadores de rolagem, conforme determinado pela ordem de árvore plana:

  • :target-before: corresponde a todos os marcadores de rolagem que precedem o marcador ativo na ordem da árvore plana dentro do grupo.
  • :target-after: corresponde a todos os marcadores de rolagem que seguem o marcador ativo na ordem da árvore plana dentro do grupo.

Sintaxe de intervalo para consultas de contêiner de estilo e if()

O Chrome aprimora as consultas de estilo CSS e a função if() adicionando suporte à sintaxe de intervalo.

Ela estende as consultas de estilo além da correspondência exata de valores (por exemplo, style(--theme: dark)). Os desenvolvedores podem usar operadores de comparação (como > e <) para comparar propriedades personalizadas, valores literais (por exemplo, 10px ou 25%) e valores de funções de substituição, como attr() e env(). Para uma comparação válida, os dois lados precisam ser resolvidos para o mesmo tipo de dados. Ele é limitado aos seguintes tipos numéricos: <length>, <number>, <percentage>, <angle>, <time>, <frequency> e <resolution>.

Exemplos:

Comparar uma propriedade personalizada com um comprimento literal:

@container style(--inner-padding > 1em) {
  .card {
    border: 2px solid;
  }
}

Comparar dois valores literais

@container style(1em < 20px) {
  /* ... */
}

Usando intervalos de estilo em if():

.item-grid {
  background-color: if(style(attr(data-columns, type<number>) > 2): lightblue; else: white);
}

Invocadores de interesse (atributo interestfor)

O Chrome adiciona um atributo interestfor aos elementos <button> e <a>. Esse atributo adiciona comportamentos de "interesse" ao elemento. Quando um usuário mostra interesse no elemento, as ações são acionadas no elemento de destino, por exemplo, mostrando um popover.

O user agent detecta quando um usuário demonstra interesse no elemento usando métodos como manter o ponteiro sobre ele, pressionar teclas de atalho especiais no teclado ou tocar e manter pressionado o elemento em telas sensíveis ao toque. Quando o interesse é demonstrado ou perdido, um InterestEvent é acionado no destino, que tem ações padrão para popovers, como mostrar e ocultar o popover.

Leitura adicional

Isso abrange apenas alguns destaques importantes. Confira os links a seguir para mais mudanças no Chrome 141.

Inscrever-se

Para ficar por dentro das novidades, inscreva-se no canal do YouTube para desenvolvedores do Chrome e receba uma notificação por e-mail sempre que lançarmos um novo vídeo. Ou siga nosso perfil no X ou LinkedIn para ler novos artigos e postagens do blog.

Assim que o Chrome 143 for lançado, vamos contar tudo o que há de novo no Chrome!