Novidades do Chrome 137

Rachel Andrew

Publicado em: 27 de maio de 2025

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

Destaques desta versão:

Use reading-flow e reading-order para garantir uma ordem de tabulação lógica em layouts complexos. A função CSS if() oferece uma maneira concisa de expressar valores condicionais. A integração de promessas do JavaScript (JSPI) permite que aplicativos WebAssembly se integrem a promessas do JavaScript.

CSS reading-flow e reading-order

A propriedade CSS reading-flow controla a ordem em que os elementos em um layout flexível, de grade ou de bloco são expostos às ferramentas de acessibilidade e como eles são focados usando métodos de navegação sequenciais lineares. Isso resolve um problema antigo com layouts de grade e flexíveis, em que a ordem de tabulação pode ficar desconectada da ordem em que os itens são organizados.

Ele usa um valor de palavra-chave, com um padrão de normal, que mantém o comportamento de ordenar elementos na ordem do DOM. Para usar em um contêiner flexível, defina o valor como flex-visual ou flex-flow. Para usar dentro de um contêiner de grade, defina o valor como grid-rows, grid-columns ou grid-order.

A propriedade CSS reading-order permite substituir manualmente a ordem dos itens em um contêiner de fluxo de leitura. Para usar essa propriedade em um contêiner de grade, flex ou bloco, defina o valor reading-flow no contêiner como source-order e defina o reading-order do item individual como um valor inteiro.

Para saber mais, leia Usar CSS reading-flow para navegação lógica por foco sequencial.

Função if() do CSS

A função CSS if() oferece uma maneira concisa de expressar valores condicionais. Ele aceita uma série de pares condição-valor, delimitados por ponto e vírgula. A função avalia cada condição sequencialmente e retorna o valor associado à primeira condição verdadeira. Se nenhuma das condições for avaliada como verdadeira, a função vai retornar um fluxo de tokens vazio.

div {
  color: var(--color);
  background-color: if(style(--color: white): black; else: white);
}

.dark {
  --color: black;
}

.light {
  --color: white;
}

<div class="dark">dark</div>
<div class="light">light</div>

Integração de promessas do JavaScript do WebAssembly (JSPI)

A integração de promessas do JavaScript (JSPI, na sigla em inglês) é uma API que permite que aplicativos WebAssembly se integrem a promessas do JavaScript.

Ele permite que um programa WebAssembly funcione como o gerador de uma promessa e interaja com APIs que têm promessas.

Em particular, quando um aplicativo usa a JSPI para chamar uma API (JavaScript) que contém uma promessa, o código WebAssembly é suspenso, e o chamador original do programa WebAssembly recebe uma promessa que será cumprida quando o programa WebAssembly for concluído.

E muito mais.

Claro que há muito mais:

  • Como continuação do particionamento de armazenamento, o Chrome implementou o particionamento do acesso ao URL do blob por chave de armazenamento.
  • Os formatos de pixel de ponto flutuante do Canvas agora estão implementados.
  • O offset-path: shape() é compatível, então você pode usar formas responsivas para definir o caminho da animação.

Leitura adicional

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

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 138 for lançado, vamos contar tudo o que há de novo no Chrome!