Veja o que é necessário saber:
- Dê um toque exclusivo ao seu texto com a animação
font-palette
e outras atualizações de CSS. - Há melhorias na API Speculation Rules.
- Você pode testar a API Element Capture em um teste de origem.
- E tem muito mais.
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.](https://developer.chrome.com/static/docs/web-platform/element-capture/image/1.png?authuser=7&hl=pt)
É 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.](https://developer.chrome.com/static/docs/web-platform/element-capture/image/3.png?authuser=7&hl=pt)
A API Element Capture resolve esse problema, permitindo que você direcione o elemento a ser compartilhado.
![Captura de tela do elemento de destino sem lista suspensa visível.](https://developer.chrome.com/static/docs/web-platform/element-capture/image/4.png?authuser=7&hl=pt)
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()
eresizeTo()
, 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étodoshowPicker()
deHTMLSelectElement
.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.
- Novidades no Chrome DevTools (121)
- Descontinuação e remoções do Chrome 121
- Atualizações do ChromeStatus.com para o Chrome 121
- Lista de alterações do repositório de origem do Chromium
- Agenda de lançamentos do Chrome
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!