Chrome 123 Beta

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

CSS

Esta versão adiciona cinco novos recursos de CSS.

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

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

Use light-dark() para especificar dois valores de cor diferentes em uma única propriedade CSS. O navegador (ou dispositivo) vai escolher automaticamente a cor adequada com base no valor color-scheme computado 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 verde-limão.
  • 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 programem regras CSS específicas que só são aplicadas quando (parte do) app da Web é mostrada no modo picture-in-picture.

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

Propriedade CSS align-content para blocos

A propriedade CSS align-content agora tem suporte para contêineres de bloco e células de tabela. Antes, essa propriedade só era compatível com itens de grade e flex. 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 tabela.

A propriedade CSS field-sizing

Usando a propriedade field-sizing, os desenvolvedores podem desativar tamanhos padrão fixos de controles de formulário e fazer com que o tamanho deles dependa do conteúdo. Isso oferece uma maneira de criar campos de texto que crescem automaticamente.

A propriedade text-spacing-trim do CSS

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

Muitos caracteres de pontuação CJK incluem espaçamento interno de glifo. Por exemplo, o ponto final e o parêntese de fechamento do CJK geralmente têm espaçamentos internos de glifos na metade direita dos espaços de glifos, 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 dos quatro valores a seguir: normal, trim-start, space-all e space-first. Saiba mais em Apresentação de quatro novos recursos internacionais no CSS.

APIs Web

Permitir a criação de credenciais do WebAuthn em um iframe entre origens

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

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

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

Pacote de recursos de relatórios de atribuição

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

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

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

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

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

blocking=render em scripts de módulo inline

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 scripts de módulo inline que importam outros scripts ainda podem renderizar o bloco.

A motivação para isso é que as transições de visualização entre documentos geralmente dependem de scripts de bloqueio de renderização para personalização. Portanto, facilitar a criação de scripts de bloqueio de renderização oferece suporte a esse recurso.

Document picture-in-picture: allow the focus() API to focus the opener

Agora, é possível usar opener.focus() em uma janela de picture-in-picture de documento para trazer o foco do sistema para a guia que é proprietária da janela de picture-in-picture de documento.

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

Sintaxe with de importação de atributos

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

jitterBufferTarget

O atributo jitterBufferTarget permite que os aplicativos especifiquem uma duração de tempo de destino em milissegundos de mídia para que o buffer de jitter RTCRtpReceiver seja mantido. Isso influencia a quantidade de bufferização feita pelo user agent, o que, por sua vez, afeta as retransmissões e a recuperação de perda de pacotes. Alterar o valor alvo permite que os aplicativos controlem a troca entre o atraso de reprodução e o risco de ficar sem frames de áudio ou vídeo devido ao jitter de rede.

Tempo de frame de animação longa

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

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

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

Isso significa que os desenvolvedores podem oferecer páginas personalizadas com base no local de onde o usuário navegou. Por exemplo, execute uma animação diferente se ela veio da página inicial.

evento de revelação de página

O evento pagereveal é acionado no objeto de janela de um documento na primeira oportunidade de renderização depois que um documento é: carregado inicialmente, restaurado do cache de ida e volta ou ativado de uma pré-renderização.

Ele pode ser usado por um autor de 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 a digitalização com várias canetas

Como os dispositivos com recursos avançados de entrada por caneta estão se tornando cada vez mais prevalentes, é importante que a plataforma da Web continue a evoluir para oferecer compatibilidade total com esses recursos avançados, a fim de desbloquear experiências ricas para usuários finais e desenvolvedores. Um desses avanços é a capacidade de um digitalizador 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 único persistente de sessão, isolado do documento, que um desenvolvedor pode usar de forma confiável para identificar canetas individuais que interagem com a página.

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

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

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

Já existem recursos para sub-recursos e workers, mas essa adição é específica 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", as solicitações não serão interrompidas 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 de cliente Sec-CH-UA-Form-Factor

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

API Service Worker de roteamento estático

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

Atualização do armazenamento compartilhado

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

zstd Content-Encoding

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

Adicionar suporte a zstd como Content-Encoding ajuda a carregar páginas mais rapidamente e usa menos largura de banda, além de gastar menos tempo, CPU e energia com a compactação nos servidores, resultando em custos reduzidos de servidores.

Novos testes de origem

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

Integração de promessas de JavaScript do WebAssembly

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

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

Registre-se para o teste de origem da integração de promessas.

Remoções

O Chrome 123 remove o recurso a seguir.

O alias window-placement para a permissão e a política de permissão window-management

No Chrome 111, window-management foi adicionado como um alias para a permissão window-placement e as strings de política de permissão. Isso fazia parte de uma iniciativa maior para renomear as strings, descontinuando e removendo window-placement. A mudança de terminologia melhora a longevidade do descritor à medida que a API Window Management evolui ao longo do tempo.

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