O Chrome 151 Beta traz um conjunto de melhorias voltadas ao desenvolvimento de interfaces mais previsíveis e interativas. Embora algumas mudanças pareçam discretas, elas resolvem limitações antigas na integração entre CSS e JavaScript — especialmente no tratamento de animações, transições, posicionamento por âncoras e eventos de rolagem.
Entre os destaques estão o acesso direto ao objeto que originou um evento de animação, a chegada da propriedade ruby-overhang, uma alteração no valor inicial de position-anchor e a identificação da rolagem por inércia em eventos wheel.
Segundo a documentação oficial, essas novidades fazem parte do Chrome 151 Beta, disponibilizado em 3 de julho de 2026 para Android, ChromeOS, Linux, macOS e Windows. Portanto, ainda é importante verificar a compatibilidade antes de utilizá-las em produção. Confira as notas oficiais do Chrome 151 Beta.
Eventos agora revelam a animação que os originou
As interfaces AnimationEvent e TransitionEvent passam a contar com o atributo somente leitura animation. Ele retorna o objeto Animation associado ao evento disparado.
Até agora, eventos como animationend e transitionend informavam dados como o nome da animação, a propriedade afetada e o tempo decorrido. Entretanto, acessar diretamente a instância responsável exigia lógica adicional ou consultas por meio da Web Animations API.
Com a novidade, torna-se possível manipular, inspecionar ou sincronizar a animação sem precisar procurá-la novamente:
`const elemento = document.querySelector(".card");
elemento.addEventListener("animationend", (event) => { const animacao = event.animation;
console.log(animacao.currentTime); console.log(animacao.playState); console.log(animacao.effect); }); ` Na prática, essa conexão reduz a distância entre animações declaradas no CSS e controles executados pelo JavaScript. Aplicações poderão, por exemplo, registrar métricas, sincronizar efeitos ou alterar a velocidade de uma animação a partir do próprio evento.
Como a propriedade é somente leitura, ela permite acessar o objeto relacionado, mas não substituir a animação vinculada ao evento.
ruby-overhang oferece maior controle para anotações tipográficas
O Chrome 151 também adiciona suporte à propriedade CSS ruby-overhang. O recurso controla se uma anotação ruby pode se projetar sobre áreas próximas ao texto principal.
Anotações ruby são utilizadas principalmente em sistemas de escrita do Leste Asiático para apresentar pronúncias e explicações acima ou ao lado de caracteres. Um exemplo comum é o furigana empregado na escrita japonesa.
<ruby class="termo"> 東京 <rt>とうきょう</rt> </ruby> .termo { ruby-overhang: auto; }
A propriedade aceita três valores:
ruby-overhang: auto; ruby-overhang: spaces; ruby-overhang: none;
O valor auto permite que o navegador determine o comportamento adequado. Já spaces restringe a projeção aos espaços em branco e à pontuação CJK.
Seguindo a especificação do CSS Working Group, none funciona atualmente como um alias de spaces. Isso significa que ele não bloqueia toda projeção: ainda permite o excesso sobre espaços e determinados sinais de pontuação.
Essa escolha evita a criação de lacunas desnecessárias no layout e preserva a legibilidade. Embora seja um recurso bastante específico, sua chegada representa um avanço para a internacionalização da web e para sites que trabalham com conteúdo multilíngue.
Valor inicial de position-anchor passa a ser normal
Outra mudança importante está no CSS Anchor Positioning, sistema que permite posicionar elementos em relação a outros componentes da página.
A propriedade position-anchor deixa de ter none como valor inicial e passa a utilizar normal. A alteração alinha o Chrome à especificação e ao comportamento adotado por outras implementações de navegador.
.tooltip { position: absolute; position-anchor: normal; }
O comportamento de normal depende da propriedade position-area:
Quando position-area está definida como none, normal age como none. Quando existe uma área de posicionamento, normal se comporta como auto.
Essa lógica permite que o navegador encontre automaticamente uma âncora apropriada quando o restante da configuração indica que o elemento deve ser posicionado em relação a ela.
Para aplicações que já utilizam Anchor Positioning, vale executar testes de regressão. A mudança do valor inicial pode alterar casos nos quais o código dependia implicitamente do antigo comportamento.
Métodos de AnimationTrigger não reiniciam animações concluídas
Os métodos de reprodução do AnimationTrigger também tiveram seu comportamento atualizado. São eles:
play; play-forwards; play-backwards.
A partir do Chrome 151, esses comandos não rebobinam automaticamente uma animação que já chegou ao fim. Se ela estiver concluída, uma nova ação de reprodução não fará com que o efeito volte silenciosamente ao início.
Isso torna a API mais previsível: reproduzir e reiniciar deixam de ser tratados como a mesma operação.
Para reiniciar uma animação de maneira intencional, será necessário redefinir sua posição ou usar uma operação apropriada antes de iniciar a reprodução novamente. Conceitualmente, o fluxo passa a ser semelhante a este:
animacao.currentTime = 0; animacao.play();
A mudança evita reinicializações inesperadas em componentes acionados por rolagem, entrada na viewport ou interações repetidas. Por outro lado, projetos que dependiam do reinício automático precisarão adaptar sua lógica.
Evento wheel passa a identificar rolagem por inércia
Uma das novidades mais interessantes para interfaces avançadas é o atributo momentum nos eventos wheel.
Em trackpads e alguns dispositivos de entrada, o conteúdo continua rolando mesmo após o usuário retirar os dedos. Isso acontece porque o sistema operacional gera eventos adicionais para simular a desaceleração natural do movimento.
Até então, era difícil diferenciar esses eventos inerciais daqueles produzidos diretamente pelo usuário. Com momentum, a aplicação poderá identificar a origem do movimento:
`window.addEventListener("wheel", (event) => { if (event.momentum) { console.log("Rolagem gerada por inércia"); return; }
console.log("Interação direta do usuário"); });`
Essa distinção pode beneficiar experiências como:
- galerias com navegação por rolagem;
- mapas e editores visuais;
- apresentações em tela cheia;
- efeitos de parallax;
- seletores horizontais;
- interfaces que transformam o movimento do trackpad em comandos.
Um desenvolvedor poderá ignorar eventos inerciais quando eles causarem trocas acidentais de página ou tratá-los de forma diferente para preservar a sensação natural do sistema.
Ainda assim, bloquear indiscriminadamente a inércia pode prejudicar a usabilidade e a acessibilidade. O atributo deve ser usado para aperfeiçoar a experiência, não para substituir o comportamento nativo sem uma justificativa clara.
Como testar os novos recursos com segurança
Como algumas dessas APIs ainda não estão disponíveis em todos os navegadores, a abordagem mais segura é adotar detecção de recursos.
No caso do novo atributo dos eventos de roda:
`window.addEventListener("wheel", (event) => { const possuiMomentum = "momentum" in event;
if (possuiMomentum && event.momentum) { // Tratamento específico para rolagem inercial } });`
Para o ruby-overhang, é possível consultar o suporte com JavaScript:
if (CSS.supports("ruby-overhang", "auto")) { document.documentElement.classList.add("supports-ruby-overhang"); }
No CSS, também é possível aplicar uma melhoria progressiva:
@supports (ruby-overhang: auto) { ruby { ruby-overhang: auto; } }
A regra continua sendo a mesma: a interface deve funcionar sem o recurso e ficar melhor quando ele estiver disponível.
Pequenas APIs, impactos importantes
O Chrome 151 não apresenta apenas novidades visuais. A atualização melhora a comunicação entre CSS e JavaScript e torna comportamentos antes implícitos mais fáceis de identificar e controlar.
O acesso ao objeto responsável por eventos de animação facilita a criação de componentes coordenados. O atributo momentum oferece uma informação que antes precisava ser estimada. Já as alterações em position-anchor e AnimationTrigger aproximam as implementações das especificações e reduzem comportamentos inesperados.
Para a maioria dos sites, essas novidades poderão ser adotadas gradualmente. Para bibliotecas de componentes, ferramentas de animação e aplicações com interfaces altamente interativas, porém, o Chrome 151 abre possibilidades relevantes — e também exige atenção a eventuais mudanças de comportamento.