Esta página foi traduzida pela API Cloud Translation.

Novidades no Chrome 121

Adriana Jara

Veja o que é necessário saber:

Dê um toque único ao texto com a animação font-palette e outras atualizações de CSS.
Há melhorias na API Speculation Rules.
Teste a API Element Capture em um teste de origem.
E há muito mais.

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

Atualizações de CSS.

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

As propriedades scrollbar-color e scrollbar-width já estão disponíveis. Com eles, você pode personalizar as barras de rolagem e alterar a cor e a largura, como você já deve imaginar.

A propriedade font-palette permite selecionar uma paleta específica para renderizar uma fonte de cor. Essa propriedade agora suporta animação, portanto, alternar entre paletas torna-se uma transição suave entre as duas paletas selecionadas.

Os pseudoelementos ::spelling-error e ::grammar-error permitem personalizar cores para os 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.

O mascaramento de CSS para SVG foi aprimorado. Esta é uma continuação do suporte a máscaras CSS aprimorado no Chrome 120, adicionando novo suporte a máscaras ao SVG (máscaras múltiplas, bem 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 mencionou a adição de suporte a condições supports() em @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, criando uma experiência do usuário melhor ao reduzir o tempo de navegação na página.

Agora, a API inclui suporte para regras de documento: elas são uma extensão da sintaxe das regras de especulação. Com ela, o navegador pode 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. Junto com um novo campo eagerness, isso permite pré-buscar automaticamente ou pré-renderizar links nas páginas imediatamente, ao passar o cursor ou ao pressionar o mouse.

Veja um exemplo de regras de documento:

{
  "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> inline. O valor desse cabeçalho precisa ser um URL que aponta 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 pré-buscas especulativas para corresponder 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. Ela 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 saber mais 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 registrar um elemento HTML específico. Ela transforma uma captura de toda a guia em uma subárvore específica do DOM, capturando apenas os descendentes diretos do elemento de destino. Em outras palavras, ela recorta e remove conteúdos ocultos e ocultos.

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

Captura de tela de uma chamada de videoconferência no Chrome. — Elad usa um aplicativo de terceiros em uma 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 desenhado em cima do conteúdo selecionado, esse menu suspenso fará parte da gravação.

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

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

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

Confira a opção Capturar um stream de vídeo de qualquer elemento para conferir exemplos de código e fazer o registro no teste de origem da ElementCapture

E muito mais.

Claro, há muito mais.

Os métodos resizeBy() e resizeTo(), parte da API Document Picture-in-Picture, agora exigem um gesto do usuário.
É possível abrir programaticamente o seletor de opções de um elemento <select> com o método showPicker() da HTMLSelectElement.
O scope_extensions, está em teste de origem, permite expandir os comportamentos de um app da Web para incluir outras origens, se houver um acordo entre a origem principal de um app da Web e as origens associadas.

Novidades no Chrome 121

Atualizações de CSS.

Atualizações da API Speculation Rules

Teste de origem da API Element Capture

E muito mais.

Leia mais

Fazer inscrição