Confira alguns dos recursos interessantes que chegaram aos navegadores da Web estáveis e Beta em janeiro de 2022.
Versões estáveis do navegador
Em janeiro, o Chrome 97 e o Firefox 96 ficaram estáveis.
O Firefox 96 enviou a função de cor hwb(). Essa função expressa uma cor por matiz, branco e escuridão.
No Firefox 96, também há a propriedade color-scheme do CSS. Essa propriedade oferece uma maneira de indicar os esquemas de cores em que um elemento pode ser renderizado. Por exemplo, para indicar que .widget pode ser renderizado nos modos claro ou escuro do sistema operacional, use o CSS abaixo.
.widget {
color-scheme: light dark;
}
Com a página de destino do esquema de cores no Firefox, isso significa que a propriedade está disponível no Chrome, Firefox e Safari.
Versões Beta do navegador
As versões Beta do navegador oferecem uma prévia do que vai aparecer na próxima versão estável. Este é um ótimo momento para testar novos recursos ou remoções que podem afetar seu site antes que o mundo receba esse lançamento.
As versões Beta de janeiro foram Chrome 98, Firefox 97 e Safari 15.4 Beta 1.
O Chrome 98 é compatível com fontes vetoriais gradientes de cor COLRv1 como um novo formato de fonte adicional. Uma fonte colorida contém glifos com várias cores, como um emoji, uma bandeira de um país ou uma letra de várias cores.
Leia mais sobre esse novo formato de fonte em Fontes vetoriais COLRv1 de gradiente de cor no Chrome 98.
Também está incluído o método structuredClone() para fazer cópias profundas de objetos e as consultas de mídia CSS dynamic-range e video-dynamic-range. Encontre mais recursos para testar na postagem do Chrome 98 Beta (em inglês).
O Chrome 98 DevTools oferece uma coleção completa de novos recursos, incluindo a nova Árvore de acessibilidade completa (em inglês).
O Firefox 97 Beta é compatível com as unidades cap e ic para length e também implementa a propriedade scrollbar-gutter.
O Safari 15.4 Beta tem uma coleção completa de novidades. Os recursos incluem a implementação do pseudoelemento ::backdrop, pseudoclasse :focus-visible, accent-color e contenção do CSS com a propriedade contain. Essa versão Beta também inclui o elemento HTML <dialog>, o atributo lazy em imagens para ativar o carregamento lento e suporte para ícones de manifesto de apps da Web.
Todos esses recursos Beta estarão disponíveis em navegadores estáveis em breve.
Parte da série para iniciantes na Web