Descubra alguns dos recursos interessantes que chegaram aos navegadores da Web estáveis e Beta em março de 2022.
Versões estáveis do navegador
Em março, o Chrome 99, o Chrome 100, o Firefox 98 e o Safari 15.4 ficaram estáveis. Isso trouxe um lote inteiro de novos recursos para a plataforma, e muitas dessas adições fizeram com que o recurso se tornasse disponível em todos os três mecanismos de navegador. Nesta postagem, concentre-se nas adições que dão interoperabilidade entre navegadores, mas confira as notas da versão para ver todos os recursos adicionados a cada mecanismo.
O Chrome 99 e o Safari 15.4 incluíam o Cascade Layers. A at-rule @layer define uma camada em cascata, ajudando você a controlar a especificidade. Ele se junta ao Firefox e, assim, o Cascade Layers está disponível nos três mecanismos de navegador. Saiba mais sobre as camadas da Cascade em As camadas em cascata estão chegando ao seu navegador.
O Chrome 100 inclui o novo valor de plus-lighter para a propriedade mix-blend-mode do CSS. Esse valor é útil ao fazer o esmaecimento cruzado de dois elementos quando todos ou um subconjunto de pixels têm os mesmos valores. Leia mais sobre o problema que isso resolve em No momento, é impossível fazer a transição cruzada de dois elementos DOM.
Compatibilidade com navegadores
- 100
- 100
- 99
- 9.1
O Safari 15.4 inclui a propriedade contain, permitindo a contenção de CSS.
O accent-color também está no Safari 15.4, que dá controle sobre a cor de destaque usada em alguns controles de formulários.
O Firefox 98 e o Safari 15.4 chegaram ao elemento <dialog>, que representa uma caixa de diálogo.
O Safari 15.4 também concluiu o suporte à pseudoclasse :focus-visible. O trabalho de implementação (link em inglês) relacionado a isso foi feito pela Igalia.
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 novas versões Beta de março foram Chrome 101 e Firefox 99.
O Chrome 101 Beta inclui notação de cor hwb. Especifica a cor de acordo com sua matiz, branco e escuridão. Assim como acontece com outras notação de cor, um componente alfa opcional especifica a opacidade.
h1 {
color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}
O Firefox 99 inclui a propriedade pdfViewerEnabled da interface do Navegador. Esta propriedade indica se o navegador é compatível com a exibição inline de arquivos PDF.
if (!navigator.pdfViewerEnabled) {
// The browser does not support inline viewing of PDF files.
}
Esses recursos Beta estarão disponíveis em navegadores estáveis em breve.
Parte da série para iniciantes na Web