Novidades no Chrome 121

Adriana Jara

Veja o que é necessário saber:

Meu nome é Adriana Jara. Vamos conferir as novidades para desenvolvedores no Chrome 121.

Atualizações do CSS.

Vamos começar com as atualizações do CSS:

As propriedades scrollbar-color e scrollbar-width já estão disponíveis. Com elas, você pode personalizar as barras de rolagem e mudar, como você provavelmente já sabe, a cor e a largura.

A propriedade font-palette permite selecionar uma paleta específica para renderizar uma fonte colorida. Agora, essa propriedade oferece suporte a animações. Assim, a troca entre paletas se torna uma transição suave entre as duas paletas selecionadas.

Os pseudoelementos ::spelling-error e ::grammar-error permitem personalizar cores para erros de ortografia e gramática, destacar palavras com erros ortográficos com cores de plano de fundo ou outras decorações e implementar a verificação ortográfica personalizada com uma aparência mais integrada.

A máscara CSS para SVG foi aprimorada. Isso é uma continuação do suporte aprimorado à máscara CSS no Chrome 120, com a adição de novos suportes de máscara ao SVG (várias máscaras, além de mask-mode, mask-composite, mask-position e mask-repeat). Além disso, agora há suporte para máscaras SVG remotas (por exemplo, mask: url(masks.svg#star)).

Correção: uma versão anterior deste artigo mencionava a adição de suporte para condições supports() ao @import, o que não era o caso. A mudança está incluída no Chrome 122.

Atualizações da API Speculation Rules

Os sites podem usar a API Speculation Rules para informar programaticamente ao Chrome quais páginas pré-renderizar, criando uma melhor experiência do usuário ao reduzir o tempo de navegação.

Agora, a API inclui suporte a regras de documento: elas são uma extensão da sintaxe de regras de especulação que permite que o navegador receba a lista de URLs para carregamento especulativo de elementos em uma página. As regras de documentos podem incluir critérios para quais desses links podem ser usados. Isso, aliado a um novo campo "eagerness", permite pré-buscar ou pré-renderizar links em páginas de forma automática e imediata, quando você passa o cursor ou pressiona o cursor.

Confira um exemplo de regras de documentos:

{
  "prerender": [
    {"where": {"and": [
       {"href_matches": "/*"},
       {"not": {"href_matches": "/logout"}},
       {"not": {"selector_matches": ".no-prerender"}}
     ]}}
  ]
}

Uma mudança separada permite especificar regras de especulação usando o cabeçalho de resposta HTTP Speculation-Rules. O cabeçalho é uma alternativa ao uso de elementos <script> in-line. O valor desse cabeçalho precisa ser um URL que aponte para um recurso de texto com o tipo MIME "application/speculationrules+json". As regras do recurso serão adicionadas ao conjunto de regras do documento.

Além disso, a sugestão No-Vary-Search permite que os carregamentos antecipados especulativos sejam correspondentes, mesmo que os parâmetros de consulta do URL mudem. O cabeçalho de resposta HTTP No-Vary-Search declara que algumas ou todas as partes da consulta de um URL podem ser ignoradas para fins de correspondência. Ele pode declarar que a ordem das chaves do parâmetro de consulta não deve impedir correspondências, que parâmetros de consulta específicos não devem impedir correspondências ou que apenas determinados parâmetros de consulta conhecidos devem causar incompatibilidades.

Acesse Melhorias na API Speculation Rules para mais informações sobre essas mudanças.

Teste de origem da API Element Capture

A API Element Capture está disponível em um teste de origem. Essa API permite capturar e gravar um elemento HTML específico. Ele transforma uma captura da guia inteira em uma captura de uma subárvore DOM específica, capturando apenas os descendentes diretos do elemento de destino. Em outras palavras, ele corta e remove o conteúdo que está obstruindo e o que está obstruído.

Um exemplo de uso da API Element Capture é um app de videoconferência que permite a incorporação de aplicativos de terceiros em um iframe. Nesse cenário, talvez você queira capturar esse iframe como um vídeo e transmiti-lo para os participantes remotos.

Captura de tela de uma videoconferência no Chrome.
Elad usa um aplicativo de terceiros em uma chamada de videoconferência com François.

Você pode usar a captura de região para fazer isso, mas, nesse caso, se algum conteúdo, como uma lista suspensa, for exibido sobre o conteúdo selecionado, ele vai fazer parte da gravação.

Captura de tela de uma lista suspensa.
A lista suspensa de Elad aparece acima do conteúdo recebido por François.

A API Element Capture resolve esse problema, permitindo que você segmente o elemento que quer compartilhar.

Captura de tela do elemento de destino sem a lista suspensa visível.
François não consegue acessar a lista suspensa de Elad.

Confira Capturar um stream de vídeo de qualquer elemento para conferir exemplos de código e se inscrever no teste de origem do ElementCapture

E muito mais.

Claro que há muito mais.

  • Os métodos resizeBy() e resizeTo(), que fazem parte da API Document Picture-in-Picture, agora exigem um gesto do usuário.

  • É possível abrir o seletor de opções de um elemento <select> de maneira programática com o método showPicker() de HTMLSelectElement.

  • scope_extensions, está em teste de origem, permite expandir os comportamentos de um app da Web para incluir outras origens, se houver concordância entre a origem principal de um app da Web e as origens associadas.

Leitura adicional

Isso cobre apenas alguns dos principais destaques. Confira os links a seguir para ver outras mudanças no Chrome 121.

Inscrever-se

Para ficar por dentro das novidades, inscreva-se no canal do YouTube para desenvolvedores do Chrome e receba uma notificação por e-mail sempre que lançarmos um novo vídeo.

Meu nome é Adriana Jara, e assim que o Chrome 122 for lançado, vou falar sobre as novidades do Chrome.