Novidades do Chrome 137

Rachel Andrew

Publicado em 27 de maio de 2025

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

Destaques desta versão:

Use reading-flow e reading-order para garantir uma ordem de guias lógica em layouts complexos. A função if() do CSS oferece uma maneira concisa de expressar valores condicionais. A integração de promessas de JavaScript (JSPI, na sigla em inglês) permite que os aplicativos do WebAssembly sejam integrados a promessas de JavaScript.

reading-flow e reading-order do CSS

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 centralizados usando métodos de navegação sequencial linear. Isso resolve um problema antigo com layouts de grade e flex, em que a ordem das guias pode ficar desconectada da ordem em que os itens são dispostos.

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 usá-lo em um contêiner flexível, defina o valor como flex-visual ou flex-flow. Para usá-lo dentro de um contêiner de grade, defina o valor como grid-rows, grid-columns ou grid-order.

A propriedade CSS reading-order permite que você substitua 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 sequencial lógica de foco.

Função if() do CSS

A função if() do CSS oferece uma maneira concisa de expressar valores condicionais. Ele aceita uma série de pares de 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 stream de token 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 no WebAssembly (JSPI)

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

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

Especificamente, quando um aplicativo usa a JSPI para chamar uma API (JavaScript) que carrega promessas, o código do WebAssembly é suspenso. O autor da chamada original do programa do WebAssembly recebe uma promessa que será cumprida quando o programa do 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 da tela agora estão implementados.
  • O offset-path: shape() tem suporte para que você possa usar formas responsivas para definir o caminho da animação.

Leitura adicional

Isso abrange apenas alguns destaques importantes. Confira os links a seguir para ver outras 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 nossa página no X ou no LinkedIn para conferir novos artigos e postagens do blog.

Assim que o Chrome 138 for lançado, vamos informar as novidades do Chrome.