Publicado em: 1º de maio de 2025
Salvo indicação em contrário, as mudanças a seguir se aplicam à versão mais recente do canal beta do Chrome para Android, ChromeOS, Linux, macOS e Windows. Saiba mais sobre os recursos listados aqui nos links fornecidos ou na lista em ChromeStatus.com. O Chrome 130 está na versão Beta desde 30 de abril de 2025. Baixe a versão mais recente em Google.com para computador ou na Google Play Store para Android.
CSS e interface
Nesta versão, adicionamos sete novos recursos de CSS e UI.
A função if()
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. Isso permite expressar uma lógica condicional complexa
de maneira simples e concisa. Exemplo:
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>
As propriedades 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 a ferramentas de acessibilidade e focados usando a navegação
por foco do teclado com tabulação. Ele usa um dos seguintes valores de palavra-chave:
normalflex-visualflex-flowgrid-rowsgrid-columnsgrid-ordersource-order
A propriedade CSS reading-order permite substituir manualmente a ordem em um
contêiner de fluxo de leitura. É um número inteiro com valor padrão de 0.
Para saber mais, leia Usar o fluxo de leitura do CSS para navegação lógica e sequencial de foco e confira alguns exemplos de fluxo de leitura.
offset-path: shape()
A função shape() já é compatível com clip-path e permite
o corte responsivo. Ativar também para offset-path fecha uma pequena lacuna em que
o mesmo tipo de forma pode ser usado para essa propriedade.
Compatibilidade com o atributo de transformação em SVGSVGElement
Esse recurso permite aplicar propriedades de transformação, como dimensionamento, rotação, translação e inclinação, diretamente ao elemento raiz <svg> usando o atributo de transformação. Com esse aprimoramento, é possível manipular todo o sistema de coordenadas SVG ou o conteúdo dele como um todo, oferecendo mais flexibilidade na criação de gráficos vetoriais dinâmicos, responsivos e interativos. Ao oferecer suporte a esse atributo, o elemento SVG pode ser transformado sem exigir elementos de wrapper adicionais ou soluções alternativas complexas de CSS, simplificando o processo de criação de gráficos da Web escalonáveis e animados.
Permitir que <use> faça referência ao elemento raiz de um documento externo omitindo o fragmento.
Nesse recurso, estamos simplificando o elemento SVG <use> ao flexibilizar os requisitos de referência. No momento, é necessário referenciar explicitamente os fragmentos
no documento SVG. Se nenhum ID de fragmento for fornecido, <use> não poderá resolver o destino, e nada será renderizado ou referenciado.
Com esse recurso, omitir fragmentos ou apenas dar o nome do arquivo SVG externo referencia automaticamente o elemento raiz, eliminando a necessidade de você alterar o documento referenciado apenas para atribuir um ID à raiz. Essa melhoria simplifica o processo de edição manual e aumenta a eficiência.
Cor de destaque do sistema para a propriedade accent-color expandida para Windows e ChromeOS
Isso permite usar a cor de destaque do sistema operacional para elementos de formulário. Ao usar a propriedade accent-color do CSS, você garante que elementos de formulário, como caixas de seleção, botões de opção e barras de progresso, adotem automaticamente a cor de destaque definida pelo sistema operacional do usuário. Esse recurso está disponível no macOS desde 2021 e agora também no Windows e no ChromeOS.
view-transition-name: match-element
O valor match-element da propriedade view-transition gera um ID exclusivo com base na identidade do elemento e permanece o mesmo para esse elemento. Isso
é usado em casos de apps de página única em que o elemento está sendo movido e você
quer animá-lo com uma transição de visualização.
APIs Web
Alinhar o tipo de erro gerado para a criação de credenciais do WebAuthn de "pagamento"
Corrige o tipo de erro gerado durante a criação de credenciais do WebAuthn para credenciais de payment. Devido a uma incompatibilidade histórica de especificação, a criação de uma credencial payment em um iframe de origem cruzada sem a ativação do usuário gerava um SecurityError em vez de um NotAllowedError, que é o que é gerado para credenciais que não são de pagamento. Essa é uma alteração interruptiva. O código que detectava o tipo de erro gerado (por exemplo, e instanceof SecurityError) era afetado. O código que geralmente processa erros durante a criação de credenciais (por exemplo, catch (e)) vai continuar funcionando corretamente.
Particionamento de URL de blobs: busca/navegação
Como continuação do particionamento de armazenamento, isso implementa o particionamento do acesso ao URL do blob por chave de armazenamento (site de nível superior, origem do frame e o booleano has-cross-site-ancestor), com exceção das navegações de nível superior que vão permanecer particionadas apenas pela origem do frame.
Essa mudança pode ser revertida temporariamente definindo a política PartitionedBlobURLUsage. A política será descontinuada quando as outras políticas corporativas relacionadas ao particionamento de armazenamento forem descontinuadas.
Call stacks em relatórios de erros de páginas da Web que não respondem
Esse recurso captura a pilha de chamadas JavaScript quando uma página da Web deixa de responder devido a um código JavaScript que executa um loop infinito ou outro cálculo muito longo. Isso ajuda os desenvolvedores a identificar a causa da falta de resposta e corrigir o problema com mais facilidade. A pilha de chamadas JavaScript é incluída na API Crash Reporting quando o motivo é falta de resposta.
Tipos de cores de ponto flutuante do Canvas
Introduz a capacidade de usar formatos de pixel de ponto flutuante (em vez de ponto fixo de 8 bits) com CanvasRenderingContext2D, OffscreenCanvasRenderingContext2D e ImageData. Isso é necessário para aplicativos de alta precisão (por exemplo, visualização médica), conteúdo de alto alcance dinâmico e espaços de cores de trabalho lineares.
Proibir a pré-renderização de HTTP em texto simples não confiável
No momento, a pré-renderização é permitida em HTTP e HTTPS, enquanto a pré-busca só funciona em HTTPS. Restrinja a pré-renderização para manter a consistência com a pré-busca.
Document-Isolation-Policy
Document-Isolation-Policy permite que um documento ative crossOriginIsolation para
si mesmo, sem precisar implantar COOP ou COEP, e independente do
status crossOriginIsolation da página. A política é apoiada pelo isolamento de processos. Além disso, os sub-recursos de origem cruzada não CORS do documento serão
carregados sem credenciais ou precisarão ter um cabeçalho CORP.
Saiba mais em Política de isolamento de documentos: ative recursos da Web avançados com facilidade.
Ed25519 na criptografia da Web
Esse recurso adiciona suporte para algoritmos Curve25519 na API Web Cryptography, especificamente o algoritmo de assinatura Ed25519.
Registro e relatórios de endereços IP
O Chrome Enterprise está aprimorando os recursos de monitoramento de segurança e resposta a incidentes coletando e informando endereços IP locais e remotos e enviando esses endereços aos registros de investigação de segurança (SIT, na sigla em inglês). Além disso, o Chrome Enterprise permite que os administradores enviem os endereços IP para provedores de SIEM internos e de terceiros usando o conector de relatórios do Chrome Enterprise. Essa opção vai estar disponível para clientes do Chrome Enterprise Core.
Integração de promessas do JavaScript
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 atue 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 caller original do programa WebAssembly recebe uma promessa que será cumprida quando o programa WebAssembly for concluído.
API Language Detector
A API Language Detector é uma API JavaScript que identifica o idioma de uma string fornecida. Essa API é compatível com um modelo ajustado para realizar tarefas de detecção de idioma.
Com base em uma string, a API Language Detector retorna uma lista ordenada dos idiomas detectados, além de um índice de confiança para cada resultado.
Os desenvolvedores podem transmitir uma lista de idiomas de entrada esperados ao criar uma instância do Language Detector para ajudar a otimizar casos de uso em que a detecção deve ser realizada em determinados idiomas.
Restringir atributos e argumentos de ponto flutuante em SVGMatrix, SVGRect e SVGPoint
Ao definir atributos ou argumentos de ponto flutuante em SVGMatrix, SVGRect e
SVGPoint, não é mais possível defini-los como Infinity ou Nan. Uma exceção do JavaScript é
gerada se você tentar definir esse atributo, conforme definido na especificação SVG.
API Selection getComposedRanges e direction
Esse recurso oferece dois novos métodos de API para a API Selection:
Selection.direction, que retorna a direção da seleção como"none","forward"ou"backward".Selection.getComposedRanges(), que retorna uma lista de 0 ou 1StaticRange"compostos"
Um StaticRange "composto" pode cruzar limites de sombra, o que os intervalos
normais não podem fazer.
Exemplo:
const range = getSelection().getComposedRanges({ shadowRoots: [root] });
Se a seleção cruzar um limite de raiz de sombra que não está na lista shadowRoots, os endpoints do StaticRange serão "redefinidos" para ficar fora dessa árvore. Isso garante que não vamos expor árvores de sombra desconhecidas.
Extensões de escopo de apps da Web
Adiciona um campo de manifesto do app da Web scope_extensions que permite que os apps da Web estendam o
escopo para outras origens.
Exemplo:
{
"name": "Example",
"display": "standalone",
"start_url": "/index.html",
"scope_extensions": [
{"type" : "type", "origin" : "https://example.com"}
]
}
Isso permite que sites que controlam vários subdomínios e domínios de nível superior sejam apresentados como um único web app.
Exige que as origens listadas confirmem a associação com o web app usando um
arquivo de configuração .well-known/web-app-origin-association.
{
"https://sample-app.com/": {
"scope": "/"
}
}
Dicas de ramificação do WebAssembly
Melhora o desempenho do código WebAssembly compilado informando ao mecanismo que uma determinada instrução de ramificação provavelmente seguirá um caminho específico. Isso permite que o mecanismo tome decisões melhores para o layout do código (melhorando os acertos de cache de instruções) e a alocação de registros.
WebGPU: GPUTextureView para vinculação de externalTexture
Agora, um GPUTextureView pode ser usado para uma vinculação externalTexture
ao criar um GPUBindGroup.
WebGPU: sobrecarga de copyBufferToBuffer
O método GPUCommandEncoder copyBufferToBuffer() agora inclui uma maneira mais simples
de copiar buffers inteiros usando uma nova sobrecarga com parâmetros opcionais de deslocamentos e tamanho.
Novos testes de origem
No Chrome 137, você pode ativar os seguintes novos testes de origem.
Atributo de bloqueio de renderização de frame rate completo
Adiciona um novo token de bloqueio de renderização de taxa de frames completa aos atributos de bloqueio. Quando o renderizador é bloqueado com o token de taxa de frames completa, ele funciona com uma taxa de frames menor para reservar mais recursos para carregamento.
Pausar a reprodução de mídia em iframes não renderizados
Adiciona uma política de permissões "media-playback-while-not-rendered" para permitir que sites
incorporadores pausem a reprodução de mídia de iframes incorporados que não são renderizados, ou seja,
têm a propriedade "display" definida como "none". Isso permite que os desenvolvedores
criem experiências mais fáceis de usar e melhorem o desempenho
deixando o navegador lidar com a reprodução de conteúdo que não está visível para os usuários.
API Rewriter
A API Rewriter transforma e reformula o texto de entrada das maneiras solicitadas, com o suporte de um modelo de linguagem de IA no dispositivo. Os desenvolvedores podem usar essa API para remover redundâncias em um texto e se adequar a um limite de palavras, reformular mensagens para se adequar ao público-alvo ou ser mais construtivo se uma mensagem usar linguagem tóxica, reformular uma postagem ou um artigo para usar palavras e conceitos mais simples e muito mais.
API Writer
A API Writer pode ser usada para escrever novos materiais com base em um comando de tarefa de escrita, com o suporte de um modelo de linguagem de IA no dispositivo. Os desenvolvedores poderão usar essa API para gerar explicações textuais de dados estruturados, compondo uma postagem sobre um produto com base em avaliações ou na descrição dele, expandindo listas de prós e contras em visualizações completas e muito mais.