Novidades do Chrome 129

Pete LePage

Veja o que é necessário saber:

Sou Pete LePage. Vamos nos aprofundar e conhecer as novidades para desenvolvedores no Chrome 129.

Dividir tarefas longas com scheduler.yield()

Tarefas longas atrasam a capacidade do navegador de responder à entrada do usuário, criando a percepção de que um site é lento e afetando métricas de desempenho importantes, como INP. Com scheduler.yield(), é possível dividir tarefas longas em partes menores, melhorando a capacidade de resposta ao retornar explicitamente à linha de execução principal.

Ele permite que você informe ao navegador:

"EI! O trabalho que vou fazer pode levar um tempo. Se você precisar pintar um frame, responder à entrada do usuário ou tiver outras tarefas importantes, tudo bem, posso esperar.

Uma representação de como dividir uma tarefa pode facilitar a interação do usuário. Na parte de cima, uma tarefa longa impede que um manipulador de eventos seja executado até que a tarefa seja concluída. Na parte de baixo, a tarefa dividida permite que o manipulador de eventos seja executado mais cedo do que seria possível.

Adicione a linha a seguir ao código JavaScript com frequência para dar espaço ao navegador e evitar problemas de INP.

await scheduler.yield();

Além disso, ele permite que o código seja priorizado para que você não perca nada ao ceder. Recomendamos o uso liberal de scheduler.yield() em funções entre partes maiores do trabalho.

Consulte Otimizar tarefas longas para mais detalhes.

Animações com tamanhos intrínsecos

As animações CSS são bem legais, mas normalmente exigem tamanhos explícitos. Não é possível usar as palavras-chave de dimensionamento intrínseco, como auto, min-content ou fit-content.

A propriedade CSS interpolate-size abre um novo conjunto de animações que não eram possíveis com palavras-chave de dimensionamento intrínsecas.

Sem interpolate-size, os botões no vídeo a seguir não têm transição.

Depois de adicionar interpolate-size: allow-keywords, os botões no vídeo terão um belo efeito de animação de transição.

Especificar interpolate-size: allow-keywords no elemento root define o novo comportamento para a página inteira. Sugerimos fazer isso sempre que a compatibilidade não for um problema.

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

Para um controle mais preciso, a função calc-size() do CSS, semelhante a calc(), também oferece suporte a operações em exatamente uma das palavras-chave de dimensionamento intrínseco compatíveis. Ao realizar cálculos de layout, a palavra-chave size é avaliada para o tamanho original de calc-size-basis.

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

Confira Animar para height: auto; (e outras palavras-chave de dimensionamento intrínseco) no CSS para saber mais detalhes.

Mudanças no posicionamento de âncora do CSS

O posicionamento de âncora do CSS foi lançado no Chrome 125, mas, após algumas discussões adicionais no grupo de trabalho do CSS, algumas mudanças foram feitas na especificação e na implementação. Se você já estiver usando a posição de âncora CSS, atualize seu código o mais rápido possível.

Primeiro, inset-area foi renomeado como position-area. Essa foi a opção preferida porque a frase position- ajuda você a lembrar que essa propriedade é aplicada ao elemento posicionado, não ao elemento âncora.

Em segundo lugar, position-try-options foi renomeado como position-try-fallbacks. Isso ajuda você a lembrar que eles são apenas substitutos para a posição principal, que é determinada pelos estilos base.

Por fim, a sintaxe funcional inset-area() está sendo removida do position-try. Portanto, use position-try-fallbacks: top em vez de position-try-fallbacks: inset-area(top).

E muito mais.

Claro que há muito mais.

Há um novo método Intl para formatar durações, com suporte para várias localidades.

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

A tela GPU da Web agora pode usar toda a extensão da tela para imagens HDR.

Além disso, há algumas descontinuações e remoções que podem afetar alguns desenvolvedores.

Leia as notas da versão completas.

Leitura adicional

Isso cobre apenas alguns dos principais destaques. Consulte os links abaixo para outras mudanças no Chrome 129.

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.

Sou Pete LePage, e vou substituir a Adriana. Assim que o Chrome 130 for lançado, vamos falar sobre as novidades do Chrome.