Novidades no Chrome 121

Adriana Jara

Veja o que é necessário saber:

Sou Adriana Jara. Vamos nos aprofundar e conhecer as novidades para desenvolvedores no Chrome 121.

Atualizações de CSS.

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

As propriedades scrollbar-color e scrollbar-width agora estão disponíveis. Com elas, é possível personalizar as barras de rolagem e mudar a cor e a largura (como você já deve ter adivinhado).

A propriedade font-palette permite selecionar uma paleta específica para renderizar uma fonte colorida. Essa propriedade agora oferece suporte a animação, para que alternar entre paletas se torne uma transição suave entre as duas paletas selecionadas.

Os pseudoelementos ::spelling-error e ::grammar-error permitem personalizar as cores para erros de ortografia e gramática, destacar palavras com erros ortográficos com cores 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. Esta é uma atualização do suporte a máscaras CSS no Chrome 120, adicionando novo suporte a máscaras ao SVG (várias máscaras, assim como mask-mode, mask-composite, mask-position e mask-repeat). Além disso, máscaras SVG remotas (por exemplo, máscara: url(masks.svg#star)) agora são compatíveis.

Correção: uma versão anterior deste artigo mencionava a adição de suporte para condições supports() a @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 devem ser pré-renderizadas, o que melhora a experiência do usuário, reduzindo o tempo de navegação nas páginas.

Agora a API é compatível com as regras de documento: elas são uma extensão da sintaxe das regras de especulação que permite ao navegador acessar a lista de URLs para carregamento especulativo dos elementos de uma página. As regras do documento 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 alteração 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 dica No-Vary-Search permite que as pré-buscas especulativas correspondam mesmo se os parâmetros de consulta do URL mudarem. 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 ver 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. Ela transforma uma captura de toda a guia em uma captura de uma subárvore do DOM específica, capturando somente descendentes diretos do elemento-alvo. Em outras palavras, ele corta e remove o conteúdo escondido.

Um exemplo de onde a API Element Capture é útil é um app de videoconferência que permite incorporar aplicativos de terceiros em um iframe. Neste cenário, talvez você queira capturar esse iframe como um vídeo e transmiti-lo aos participantes remotos.

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

É possível usar a Captura de região para fazer isso, mas, nesse caso, se algum conteúdo, como uma lista suspensa, for desenhado sobre o conteúdo selecionado, ele fará parte da gravação.

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

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

Captura de tela do elemento de destino sem lista suspensa na visualização.
François não vê a lista suspensa da Elad.

Confira a página Capture um stream de vídeo de qualquer elemento para ver exemplos de código e registre-se no teste de origem da ElementCapture.

E muito mais.

É claro que há muito mais.

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

  • Você pode abrir o seletor de opções de um elemento <select> de forma programática com o método showPicker() de HTMLSelectElement.

  • O scope_extensions está em teste de origem e permite expandir os comportamentos de um app da Web para incluir outras origens, caso haja um acordo entre a origem de um app da Web e as origens associadas.

Leitura adicional

Isso cobre apenas alguns dos principais destaques. Verifique os links a seguir para mudanças adicionais no Chrome 121.

Inscrever-se

Para ficar por dentro das novidades, inscreva-se no Canal Chrome Developers no YouTube, e você receberá uma notificação por e-mail sempre que lançarmos um novo vídeo.

Adriana Jara! Assim que o Chrome 122 for lançado, estarei aqui para contar as novidades do Chrome!