Chrome 133 Beta

Rachel Andrew

Publicado em: 15 de janeiro de 2024

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 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 computador ou na Google Play Store para Android.

CSS e interface

Nesta versão, adicionamos sete novos recursos de CSS e UI.

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

Implementa o aumento para attr() especificado no CSS nível 5, que permite tipos além de <string> e uso em todas as propriedades do CSS (além do suporte atual para o pseudo-elemento content).

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

Pseudoclasse :open do CSS

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

Consultas de contêiner de estado de rolagem do CSS

Use consultas de contêiner para estilizar descendentes de contêineres com base no estado de rolagem deles.

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 posicionado de forma fixa fica preso a uma das bordas da caixa de rolagem.
• snapped: um contêiner de ajuste de rolagem alinhado está ajustado 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 refinado 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 de fonte. Saiba mais em CSS text-box-trim.

O valor hint do atributo popover

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

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

Melhorias no posicionamento do invocador de pop-up e da âncora

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

O pop-up aninhado dentro do invocador não deve invocá-lo novamente

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

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

Antes, isso acontecia porque o clique no popover era propagado para o <button> e ativava o invocador, que alternava o popover para fechado. Isso agora 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, independente 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 dela e se o currentTime é uma porcentagem do tempo total (como no caso de animações controladas por rolagem) ou uma quantidade de tempo absoluta (como no caso de animações controladas 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 de CSP para scripts

Aplicativos da Web complexos geralmente precisam acompanhar os sub-recursos que eles baixam para fins 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 baixam e executam.

Esse recurso se baseia na CSP e na API Reporting para informar os URLs e hashes (para CORS/mesma origem) de todos os recursos de script carregados pelo documento.

Movimentação que preserva o estado do DOM

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

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

• <iframe> elementos permanecem carregados.
• O elemento ativo permanece em foco.
• Os popovers, a tela cheia e as caixas de diálogo modais 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 estava 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.

Expor renderTime entre origens com granularidade reduzida no tempo do elemento e no LCP (independente de Timing-Allow-Origin)

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

No momento, 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, mostrando 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 todos os tempos de renderização em 4 ms quando o documento não estiver isolado de origem cruzada. Isso parece ser suficientemente grosseiro para evitar o vazamento de informações úteis sobre imagens de origem cruzada durante a decodificação.

Reverter responseStart e introduzir firstResponseHeadersStart

Com as dicas iniciais 103 ativadas, as respostas têm dois carimbos de data/hora:

• Quando as dicas antecipadas chegam (103)
• Quando os cabeçalhos finais chegam (por exemplo, 200)

Quando o Chrome 115 foi lançado firstInterimResponseStart para permitir a medição desses dois carimbos de data/hora, também mudamos o significado de responseStart (usado por Time to First Byte (TTFB)) para significar "os cabeçalhos finais". Isso criou um problema de compatibilidade da Web com navegadores e ferramentas que não fizeram uma mudança semelhante para essa métrica usada com frequência.

O Chrome 133 reverte essa mudança de responseStart para resolver o problema de compatibilidade e introduz firstResponseHeadersStart para permitir que os sites meçam o tempo até os cabeçalhos finais, mantendo a definição original do TTFB.

A interface FileSystemObserver

A interface FileSystemObserver notifica sites sobre mudanças no sistema de arquivos. Os sites observam mudanças em arquivos e diretórios, aos quais o usuário concedeu permissão anteriormente, no dispositivo local do usuário ou no Bucket File System (também conhecido como Origin Private File System), e recebem notificações 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 exceder um limite de uso da CPU, a menos que:

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

O congelamento consiste em pausar a execução. Ela é definida formalmente na API Page Lifecycle.

O limite de uso da CPU será calibrado para congelar aproximadamente 10% das guias em segundo plano quando a Economia de energia estiver ativa.

Vários mapas de importação

No momento, 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 usar em cenários da vida real: qualquer módulo carregado antes deles quebra todo o app. Em apps com muitos módulos, eles se tornam um grande recurso de bloqueio, já que todo o mapa 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 determinista.

Cabeçalhos de acesso ao armazenamento

Oferece uma maneira alternativa para incorporações autenticadas ativarem cookies não particionados. Esses cabeçalhos indicam se os cookies não particionados estão (ou podem ser) incluídos em uma determinada solicitação de rede e permitem que os servidores ativem as permissões "storage-access" 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 iframe e pode reduzir a latência de incorporações autenticadas.

Compatibilidade com a criação de ClipboardItem com Promise<DOMString>

O ClipboardItem, que é a entrada para o 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 resulta em um blob ou uma string.

WebAssembly Memory64

A proposta memory64 adiciona suporte para memórias lineares do WebAssembly com tamanho maior que 2^32 bits. Ela 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 do WebAuthn são compatíveis com o cliente do usuário. O método retorna uma lista de recursos compatíveis, permitindo que os desenvolvedores personalizem as experiências e os fluxos de trabalho de autenticação com base na funcionalidade específica do cliente.

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

Adiciona outros formatos de vértice não presentes na versão inicial do WebGPU devido à falta de suporte ou versões antigas do macOS (que não são mais compatíveis com nenhum navegador). Os formatos de vértice de um componente permitem que os aplicativos solicitem apenas os dados necessários, enquanto antes era preciso 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 shader.

Algoritmo X25519 da API Web Cryptography.

O algoritmo "X25519" fornece ferramentas para realizar o contrato de chave usando a função X25519 especificada em [RFC7748]. O identificador de 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

Com esse teste de desativação, os sites podem desativar o comportamento de congelamento na Economia de Energia que será lançado no Chrome 133.

Descontinuações e remoções

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

Esta versão do Chrome descontinua um recurso.

Descontinuar o limite maxInterStageShaderComponents da WebGPU

O maxInterStageShaderComponents limit está 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 as etapas do shader.
• Pequenas discrepâncias: embora haja pequenas diferenças na forma como os dois limites são calculados, elas são pequenas e podem ser gerenciadas de maneira eficaz no limite de maxInterStageShaderVariables.
• Simplificação: a remoção de maxInterStageShaderComponents simplifica a interface do shader e reduz a complexidade para os desenvolvedores. Em vez de gerenciar dois limites separados com diferenças sutis, eles podem se concentrar no maxInterStageShaderVariables, que tem um nome mais adequado e é mais abrangente.

Esta versão do Chrome remove dois recursos.

Remover a regra dos <link rel=prefetch> cinco minutos

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

Isso significa que os desenvolvedores da Web precisam incluir cabeçalhos de cache adequados (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.

Remoção do acionamento da página de boas-vindas do Chrome nas guias de execução inicial de preferências

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 de computador.