Chrome 123 Beta

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 123 está na versão Beta desde 21 de fevereiro de 2024. Faça o download da versão mais recente em Google.com para computador ou na Google Play Store no Android.

CSS

Nesta versão, adicionamos cinco novos recursos CSS.

Função de cor CSS light-dark()

A função light-dark() no CSS permite que os desenvolvedores adaptem o esquema de cores com mais facilidade à preferência do usuário pelo modo claro ou escuro.

Use light-dark() para especificar dois valores de cor diferentes em uma única propriedade CSS. O navegador (ou dispositivo) escolherá automaticamente a cor adequada com base no valor de color-scheme calculado do elemento. Por exemplo, com o seguinte CSS:

  • Se o usuário tiver selecionado um tema claro, o elemento .target terá um plano de fundo lima.
  • Se o usuário tiver selecionado um tema escuro, o elemento .target terá um plano de fundo verde.
html {
  color-scheme: light dark;
}
.target {
    background-color: light-dark(lime, green);
}

Modo de exibição picture-in-picture do CSS

Adiciona suporte ao recurso de mídia display-mode do CSS para o valor picture-in-picture. Isso permite que os desenvolvedores da Web escrevam regras CSS específicas que são aplicadas somente quando (parte do) o app da Web é exibido no modo picture-in-picture.

Saiba mais sobre esse recurso de mídia na documentação do picture-in-picture.

Propriedade de CSS do align-content para blocos

A propriedade CSS align-content agora é compatível com contêineres de bloco e células de tabela. Antes, essa propriedade era compatível apenas com itens flexíveis e grade. Por exemplo, display: block, display: list-item e display: table-cell agora podem ser alinhados usando align-content.

Saiba mais em Suporte a align-content em layouts de bloco e de tabela.

A propriedade do CSS field-sizing

Com a propriedade field-sizing, os desenvolvedores podem desativar tamanhos fixos padrão dos controles de formulários e fazer com que o tamanho deles dependa do conteúdo. Isso fornece uma maneira de criar campos de texto de crescimento automático.

A propriedade text-spacing-trim do CSS

Essa propriedade aplica o kerning a caracteres de pontuação chineses, japoneses e coreanos (CJK) para produzir uma tipografia visualmente agradável, conforme definido por JLREQ (requisitos para layout de texto em japonês) e CLREQ (requisitos para layout de texto chinês).

Muitos caracteres de pontuação CJK incluem espaçamento interno do glifo. Por exemplo, o ponto final do CJK e o parêntese de fechamento do CJK geralmente têm espaçamento interno do glifo na metade direita dos espaços de glifo, para dar a eles um avanço constante como outros caracteres ideográficos. Mas, quando aparecem em uma linha, os espaços internos do glifo se tornam excessivos. Esse recurso ajusta esse espaçamento excessivo.

A propriedade text-spacing-trim aceita um destes quatro valores: normal, trim-start, space-all e space-first. Saiba mais em Introdução aos quatro novos recursos internacionais em CSS.

APIs Web

Permitir a criação de credenciais do WebAuthn em um iframe de origem cruzada

Esse recurso permite que os desenvolvedores da Web criem credenciais da WebAuthn (ou seja, credenciais "publickey", conhecidas como chaves de acesso) em iframes de origem cruzada. Duas condições são necessárias para esse novo recurso:

  • O iframe tem uma política de permissão publickey-credentials-create-feature.
  • O iframe tem ativação temporária do usuário.

Isso vai permitir que os desenvolvedores criem chaves de acesso em cenários incorporados, como após um fluxo de verificação de identidade em que a parte confiável está fornecendo uma experiência de identidade federada.

Pacote de recursos da API Attribution Reporting

O Chrome 123 adiciona personalização de dados do acionador e filtros de valor agregáveis à API Attribution Reporting com foco em:

  • Mais configuração da API para relatórios a nível de evento, com suporte à personalização de valores e cardinalidade de dados do acionador.
  • Mais configuração de API para relatórios de resumo com suporte a filtros em valores agregáveis.

Medição de atribuição entre apps e na Web

Ampliação da API Attribution Reporting para permitir a atribuição de conversões que acontecem na Web a eventos que acontecem fora do navegador em outros aplicativos.

A proposta aproveita o suporte no nível do SO para atribuição. Especificamente, ela oferece ao desenvolvedor a opção de permitir que eventos na Web para dispositivos móveis sejam unidos a eventos no Sandbox de privacidade do Android, embora o suporte para outras plataformas também possa ser implementado.

blocking=render em scripts de módulo in-line

Essa é uma pequena mudança que remove uma limitação artificial de <script blocking="render">. Antes dessa mudança, <script blocking="render"type="module"> requer um atributo src, mesmo que esse src seja um URI de dados. Essa é uma restrição desnecessária, já que os scripts de módulo in-line que importam outros scripts ainda precisam ser capazes de renderizar o bloco.

A motivação para isso é que as transições de visualização entre documentos geralmente dependem de scripts bloqueadores de renderização para personalização. Portanto, tornar os scripts de bloqueio de renderização mais fáceis de criar seria compatível com esse recurso.

Picture-in-picture do documento: permite que a API focus() concentre o elemento que o abre

Agora você pode usar opener.focus() em uma janela picture-in-picture de um documento para levar o foco do sistema para a guia que tem essa janela.

Isso permite que os desenvolvedores coloquem a guia original de volta em primeiro plano quando necessário. Por exemplo, quando o usuário precisa acessar uma experiência de interface que não se encaixa na janela picture-in-picture menor.

Importar a sintaxe dos atributos with

Os atributos de importação são um recurso JavaScript que permite anotar declarações de importação, como import xxx from "mod" with { type: "json" }. Originalmente, o Chrome enviava uma versão anterior da proposta (no Chrome 91) usando assert como palavra-chave. Esta versão foi atualizada para usar with devido a algumas mudanças necessárias na integração com HTML para módulos JSON e CSS.

jitterBufferTarget

O atributo jitterBufferTarget permite que os aplicativos especifiquem uma duração desejada em milissegundos de mídia para que o buffer de instabilidade RTCRtpReceiver seja retido. Isso influencia a quantidade de armazenamento em buffer feito pelo user agent, o que, por sua vez, afeta as retransmissões e a recuperação de perda de pacotes. Alterar o valor desejado permite que os apps controlem o equilíbrio entre o atraso de reprodução e o risco de ficar sem frames de áudio ou vídeo devido à instabilidade da rede.

Tempo do frame de animação longo

A API Long Animation Frames é uma extensão da API Long Tasks. Ela mede a tarefa junto com a atualização de renderização subsequente, adicionando informações como scripts de longa duração, tempo de renderização e tempo gasto no layout e estilo forçados, o que é conhecido como troca de layout.

Os desenvolvedores podem usar isso como um diagnóstico de "lentidão", que é medida pelo INP, encontrando as causas do congestionamento da linha de execução principal, que geralmente é a causa de um INP ruim.

A interface NavigationActivation adiciona navigation.activation. Isso armazena o estado de quando o documento atual foi ativado (por exemplo, quando foi inicializado ou restaurado do cache de avanço e retorno).

Isso significa que os desenvolvedores podem oferecer páginas personalizadas com base na origem do usuário. Por exemplo, executar uma animação diferente se eles vierem da página inicial.

evento pagereveal

O evento pagereveal é disparado no objeto de janela de um documento na primeira oportunidade de renderização após um documento ser carregado, restaurado pelo cache de avanço e retorno ou ativado por uma pré-renderização.

Ele pode ser usado pelo autor da página para configurar uma experiência de entrada na página, como uma transição de visualização de um estado anterior.

PointerEvent.deviceId para tinta com várias canetas

Como os dispositivos com recursos avançados de entrada com caneta estão se tornando cada vez mais prevalentes, é importante que a plataforma da Web continue a evoluir para oferecer suporte total a esses recursos avançados a fim de proporcionar experiências avançadas para usuários finais e desenvolvedores. Um desses avanços é a capacidade do digitalizador de um dispositivo de reconhecer mais de um dispositivo de caneta interagindo com ele simultaneamente. Esse recurso é uma extensão da interface PointerEvent para incluir um novo atributo, deviceId, que representa um identificador exclusivo, permanente e isolado de um documento que um desenvolvedor pode usar de maneira confiável para identificar canetas individuais que interagem com a página.

Verificações de acesso à rede particular para solicitações de navegação: modo somente aviso

Antes de o site A acessar outro site B na rede privada do usuário, esse recurso faz o seguinte:

  1. Verifica se a solicitação foi iniciada de um contexto seguro.
  2. Envia uma solicitação de simulação e verifica se B responde com um cabeçalho que permite o acesso à rede privada.

Já existem recursos para sub-recursos e workers, mas essa adição é especificamente para solicitações de navegação.

Essas verificações são feitas para proteger a rede privada do usuário. Como esse recurso está no modo "somente aviso", ele não vai falhar nas solicitações se alguma das verificações falhar. Em vez disso, um aviso será exibido no DevTools para ajudar os desenvolvedores a se prepararem para a aplicação da política.

Dica do cliente Sec-CH-UA-Form-Factor

Essa dica indica o "formato" do user agent ou dispositivo para que o site possa personalizar a resposta.

API Service Worker Static Routing

Essa API permite que os desenvolvedores configurem o roteamento e descarreguem coisas simples dos service workers. Se a condição for correspondente, a navegação vai acontecer sem iniciar service workers ou executar JavaScript, o que permite que as páginas da Web evitem penalidades de desempenho devido a interceptações do service worker. Para mais informações, consulte a postagem anterior do blog sobre essa API.

Atualização de armazenamento compartilhado

Essa atualização oferece suporte à execução de worklets de origem cruzada sem precisar criar um iframe.

zstd Content-Encoding

Zstandard, ou zstd, é um mecanismo de compactação de dados descrito no RFC8878. Ele é um algoritmo de compactação rápido sem perdas, direcionado a cenários de compactação em tempo real no nível zlib e taxas de compactação melhores. O token zstd foi adicionado como um token Content-Encoding registrado pela IANA.

Adicionar suporte a zstd como uma codificação de conteúdo vai ajudar a carregar páginas mais rapidamente, usar menos largura de banda e gastar menos tempo, CPU e energia na compactação dos nossos servidores, resultando na redução dos custos de servidor.

Novos testes de origem

No Chrome 123, você pode ativar os novos testes de origem a seguir.

Integração da promessa do JavaScript do WebAssembly

Para oferecer suporte a aplicativos responsivos criados com o WebAssembly, é necessário fornecer recursos que permitam que os programas WebAssembly sejam suspensos e retomados.

O principal caso de uso inicial da integração de promessas é permitir que programas WebAssembly cuja origem depende de APIs síncronas usem APIs assíncronas cada vez mais comuns na plataforma Web.

Inscreva-se para o teste de origem da integração da promessa.

Remoções

O Chrome 123 remove o recurso a seguir.

O alias window-placement da política de permissões e window-management

No Chrome 111, window-management foi adicionado como um alias para as strings de permissão e política de permissão window-placement. Isso fez parte de um esforço maior para renomear as strings com a descontinuação e remoção de window-placement. A mudança de terminologia melhora a longevidade do descritor à medida que a API Window Management evolui com o tempo.

Os avisos de descontinuação do alias window-placement começaram no Chrome 113 e agora serão removidos.