Chrome 133 Beta

Rachel Andrew

Publicado em 15 de janeiro de 2024

A menos que indicado de outra forma, 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 do ChromeStatus.com. O Chrome 133 está na versão Beta desde 15 de janeiro de 2024. Faça o download da versão mais recente em Google.com para computadores ou na Google Play Store no Android.

CSS e interface

Esta versão adiciona sete novos recursos de CSS e interface.

Função attr() avançada do CSS

Implementa o aumento para attr() especificado no CSS Level 5, que permite tipos além de <string> e uso em todas as propriedades do CSS (além do suporte existente para o pseudoelemento content).

Saiba mais em O CSS attr() recebe um upgrade.

Pseudoclasse :open do CSS

A pseudoclasse :open corresponde a <dialog> e <details> quando eles estão no estado aberto e corresponde a <select> e <input> quando eles estão em modos que têm um seletor e o seletor está sendo mostrado.

Consultas de contêiner de estado de rolagem do CSS

Use consultas de contêiner para definir o estilo de descendentes de contêineres com base no estado de rolagem.

O contêiner de consulta é um contêiner de rolagem ou um elemento afetado pela posição de rolagem de um contêiner de rolagem. É possível consultar os seguintes estados:

  • stuck: um contêiner com posição fixa fica preso a uma das bordas da caixa de rolagem.
  • snapped: um contêiner alinhado com o ajuste de rolagem está fixado horizontalmente ou verticalmente.
  • scrollable: indica se um contêiner de rolagem pode ser rolado em uma direção consultada.

Um novo container-type: scroll-state permite que os contêineres sejam consultados.

#sticky {
  position: sticky;
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  #sticky-child {
    font-size: 75%;
  }
}

Saiba mais em CSS scroll-state().

CSS text-box, text-box-trim e text-box-edge

Para alcançar o equilíbrio ideal do conteúdo de texto, as propriedades text-box-trim e text-box-edge, junto com a propriedade abreviada text-box, permitem um controle mais preciso do alinhamento vertical do texto.

A propriedade text-box-trim especifica os lados a serem cortados, acima ou abaixo, e a propriedade text-box-edge especifica como a borda deve ser cortada.

Essas propriedades permitem controlar o espaçamento vertical com precisão usando as métricas da fonte. Saiba mais em CSS text-box-trim.

O valor hint do atributo popover

A API Popover especifica o comportamento para dois valores do atributo popover: auto e manual. Esse recurso descreve um terceiro valor, popover=hint. As dicas, que geralmente são associadas a comportamentos do tipo "tooltip", têm comportamentos um pouco diferentes. A principal diferença é que um hint é subordinado a auto ao abrir pilhas aninhadas de popovers. Portanto, é possível abrir um popover hint não relacionado enquanto uma pilha de popovers auto permanece aberta.

O exemplo canônico é quando um seletor <select> está aberto (popover=auto) e uma dica de ferramenta acionada por passagem do cursor (popover=hint) é mostrada. Essa ação não fecha o seletor <select>.

Melhorias no posicionamento de invocação e âncora de pop-up

Adiciona uma maneira imperativa de definir relações de invocação entre popovers com popover.showPopover({source}). Permite que relacionamentos de invocação criem referências de elementos de âncora implícitos.

O pop-up aninhado dentro do invocador não precisa ser invocado novamente.

No caso a seguir, clicar no botão ativa corretamente o pop-up, mas clicar no pop-up depois disso não deve fechá-lo.

<button popovertarget=foo>Activate
  <div popover id=foo>Clicking me shouldn't close me</div>
</button>

Isso acontecia porque o clique no pop-up flutuava para o <button> e ativava o invocador, que alternava o pop-up fechado. Isso foi alterado para o comportamento esperado.

APIs Web

Animation.overallProgress

Oferece aos desenvolvedores uma representação conveniente e consistente de até onde uma animação avançou nas iterações, independentemente da natureza da linha do tempo. Sem a propriedade overallProgress, é necessário calcular manualmente o quanto uma animação avançou, considerando o número de iterações da animação e se o currentTime da animação é uma porcentagem do tempo total (como no caso de animações movidas por rolagem) ou uma quantidade de tempo absoluta (como no caso de animações movidas por tempo).

O método pause() do objeto Atomics

Adiciona o método pause() ao objeto de namespace Atomics para indicar à CPU que o código atual está executando um spinlock.

Relatórios de hash do CSP para scripts

Aplicativos da Web complexos geralmente precisam manter o controle dos subrecursos que eles fazem o download, por motivos de segurança.

Em particular, os próximos padrões e práticas recomendadas do setor (por exemplo, PCI-DSS v4) exigem que os aplicativos da Web mantenham um inventário de todos os scripts que eles fazem o download e executam.

Esse recurso é baseado no CSP e na API Reporting para informar os URLs e hashes (para CORS/mesma origem) de todos os recursos de script que o documento carrega.

Mover preservando o estado do DOM

Adiciona uma primitiva DOM (Node.prototype.moveBefore) que permite mover elementos em uma árvore DOM, sem redefinir o estado do elemento.

Ao mover em vez de remover e inserir, o estado a seguir, como o seguinte, é preservado:

  • Os elementos <iframe> continuam carregados.
  • O elemento ativo permanece em foco.
  • Pop-ups, caixas de diálogo modais e em tela cheia permanecem abertos.
  • As transições e animações do CSS continuam.

Expor o atributo attributionsrc em <area>

Alinha a exposição do atributo attributionsrc em <area> com o comportamento de processamento atual do atributo, mesmo quando ele não foi exposto.

Além disso, faz sentido oferecer suporte ao atributo em <area>, já que esse elemento é uma superfície de navegação de primeira classe, e o Chrome já oferece suporte a isso nas outras superfícies de <a> e window.open.

Exposição de renderTime entre origens grosseiras no tempo de elementos e LCP (independentemente de Timing-Allow-Origin)

O tempo do elemento e as entradas de LCP têm um atributo renderTime, alinhado com o primeiro frame em que uma imagem ou texto foi exibido.

Atualmente, esse atributo é protegido para imagens de origem cruzada exigindo um cabeçalho Timing-Allow-Origin no recurso de imagem. No entanto, essa restrição é fácil de contornar (por exemplo, exibindo uma imagem de mesma origem e de origem cruzada no mesmo frame).

Como isso tem sido uma fonte de confusão, planejamos remover essa restrição e aumentar o tempo de renderização em 4 ms quando o documento não estiver isolado de origem cruzada. Isso é aparentemente grosseiro o suficiente para evitar o vazamento de informações úteis no momento da decodificação sobre imagens de origem cruzada.

Interface FileSystemObserver

A interface FileSystemObserver notifica os sites sobre mudanças no sistema de arquivos. Os sites observam mudanças em arquivos e diretórios, para os quais o usuário concedeu permissão anteriormente, no dispositivo local do usuário ou no sistema de arquivos do bucket (também conhecido como sistema de arquivos particular de origem) e são notificados sobre informações básicas de mudança, como o tipo de mudança.

Congelamento na economia de energia

Quando a Economia de energia está ativa, o Chrome congela um "grupo de contexto de navegação" que ficou oculto e em silêncio por mais de cinco minutos se qualquer subgrupo de frames de mesma origem dentro dele exceder um limite de uso da CPU, a menos que:

  • Oferece funcionalidade de conferência de áudio ou vídeo (detectada pela identificação de microfone, câmera ou captura de tela/janela/guia ou uma RTCPeerConnection com um RTCDataChannel "aberto" ou uma MediaStreamTrack "ao vivo").
  • Controla um dispositivo externo (detectado com o uso do WebUSB, Web Bluetooth, WebHID ou Web Serial).
  • Mantém um bloqueio da Web ou uma conexão IndexedDB que bloqueia uma atualização de versão ou uma transação em uma conexão diferente.

O congelamento consiste em pausar a execução. Ele é definido formalmente na API Lifecycle da página.

O limite de uso da CPU será calibrado para congelar aproximadamente 10% das guias em segundo plano quando o modo de economia de energia estiver ativo.

Vários mapas de importação

Atualmente, os mapas de importação precisam ser carregados antes de qualquer módulo ES, e só pode haver um mapa de importação por documento. Isso os torna frágeis e potencialmente lentos para uso em cenários reais: qualquer módulo que seja carregado antes deles quebra o app inteiro e, em apps com muitos módulos, eles se tornam um recurso de bloqueio grande, já que o mapa completo de todos os módulos possíveis precisa ser carregado primeiro.

Esse recurso permite vários mapas de importação por documento, mesclando-os de maneira consistente e determinística.

Cabeçalhos de acesso ao armazenamento

Oferece uma maneira alternativa para que as incorporações autenticadas ativem cookies não particionados. Esses cabeçalhos indicam se os cookies não particionados são (ou podem ser) incluídos em uma determinada solicitação de rede e permitem que os servidores ativem as permissões de "acesso ao armazenamento" que já foram concedidas. Oferecer uma maneira alternativa de ativar a permissão "storage-access" permite o uso por recursos que não são de iframe e pode reduzir a latência para incorporações autenticadas.

Oferecer suporte à criação de ClipboardItem com Promise<DOMString>

O ClipboardItem, que é a entrada do método write() da área de transferência assíncrona, agora aceita valores de string, além de Blobs no construtor. ClipboardItemData pode ser um Blob, uma string ou uma promessa que é resolvida como um Blob ou uma string.

Memory64 do WebAssembly

A proposta memory64 adiciona suporte a memórias lineares do WebAssembly com tamanho maior que 2^32 bits. Ele não fornece novas instruções, mas estende as instruções atuais para permitir índices de 64 bits para memórias e tabelas.

​​API Web Authentication: método PublicKeyCredential getClientCapabilities()

O método PublicKeyCredential getClientCapabilities() permite determinar quais recursos da WebAuthn são compatíveis com o cliente do usuário. O método retorna uma lista de recursos com suporte, permitindo que os desenvolvedores personalizem experiências de autenticação e fluxos de trabalho com base na funcionalidade específica do cliente.

WebGPU: formatos de vértice de um componente (e unorm8x4-bgra)

Adiciona formatos de vértice adicionais que não estavam presentes na versão inicial da WebGPU devido à falta de suporte ou versões antigas do macOS (que não têm mais suporte de nenhum navegador). Os formatos de vértice de um componente permitem que os aplicativos solicitem apenas os dados necessários, quando antes eles precisavam solicitar pelo menos duas vezes mais para tipos de dados de 8 e 16 bits. O formato unorm8x4-bgra torna um pouco mais conveniente carregar cores de vértice codificadas em BGRA, mantendo o mesmo sombreador.

Algoritmo X25519 da API Web Cryptography

O algoritmo "X25519" fornece ferramentas para realizar o contrato de chaves usando a função X25519 especificada em [RFC7748]. O identificador do algoritmo "X25519" pode ser usado na interface SubtleCrypto para acessar as operações implementadas: generateKey, importKey, exportKey, deriveKey e deriveBits.

Novos testes de origem

No Chrome 133, você pode ativar os seguintes novos testes de origem.

Desativar o congelamento na Economia de energia

Esse teste de desativação permite que os sites desativem o comportamento de congelamento do modo de economia de energia que é enviado no Chrome 133.

Suspensões de uso e exclusões

Esta versão do Chrome apresenta as descontinuações e remoções listadas abaixo. Acesse o ChromeStatus.com para conferir listas de descontinuações planejadas, descontinuações atuais e remoções anteriores.

Esta versão do Chrome descontinua um recurso.

O limite maxInterStageShaderComponents da WebGPU foi descontinuado

O maxInterStageShaderComponents limit foi descontinuado devido a uma combinação de fatores. A data de remoção pretendida no Chrome 135.

  • Redundância com maxInterStageShaderVariables: esse limite já tem uma finalidade semelhante, controlando a quantidade de dados transmitidos entre os estágios do sombreador.
  • Discrepâncias menores: embora haja pequenas diferenças na forma como os dois limites são calculados, essas diferenças são pequenas e podem ser gerenciadas de forma eficaz dentro do limite de maxInterStageShaderVariables.
  • Simplificação: a remoção de maxInterStageShaderComponents simplifica a interface do sombreador e reduz a complexidade para os desenvolvedores. Em vez de gerenciar dois limites separados com diferenças sutis, eles podem se concentrar no maxInterStageShaderVariables mais apropriado e abrangente.

Esta versão do Chrome remove dois recursos.

Anteriormente, quando um recurso era pré-buscado usando <link rel=prefetch>, o Chrome ignorava a semântica do cache (ou seja, max-age e no-cache) para o primeiro uso em cinco minutos, para evitar a busca novamente. Agora, o Chrome remove esse caso especial e usa a semântica normal do cache HTTP.

Isso significa que os desenvolvedores da Web precisam incluir cabeçalhos de armazenamento em cache apropriados (Cache-Control ou Expires) para aproveitar os benefícios do <link rel=prefetch>.

Isso também afeta o <link rel=prerender> não padrão.

A página de boas-vindas do Chrome não é mais aberta com as guias de execução inicial dos ajustes

A inclusão de chrome://welcome na propriedade first_run_tabs do arquivo initial_preferences não terá mais efeito. Ela foi removida porque é redundante com a experiência de primeira execução que é acionada em plataformas para computador.