Descubra alguns dos recursos interessantes que chegaram aos navegadores da Web estáveis e Beta em novembro de 2022.
Versões estáveis do navegador
Em novembro, o Firefox 107 e o Chrome 108 ficaram estáveis. Vamos dar uma conferida no que isso significa para a plataforma da Web.
Uma mudança no comportamento da janela de visualização do layout no Chrome para Android
Há uma mudança no comportamento da janela de visualização de layout a partir do Chrome 108 no Android quando o teclado na tela é mostrado. Para saber mais, leia o artigo Preparar-se para as mudanças no comportamento de redimensionamento da janela de visualização no Chrome no Android.
Novas unidades da janela de visualização
Também no Chrome 108 estão as novas unidades de janela de visualização CSS. Isso inclui unidades pequenas (svw, svh, svi, svb, svmin, svmax), grandes (lvw, lvh, lvi, lvb, lvmin, lvmax), dinâmicas (dvw, dvh, dvi, dvb, dvmin, dvmax) e lógicas (vi, vb). Essas unidades já estão implementadas no Firefox e no Safari, o que significa que agora temos interoperabilidade entre os três principais mecanismos de navegador para essas unidades.
Leia As unidades da janela de visualização grande, pequena e dinâmica.
Compatibilidade com navegadores
- 108
- 108
- 101
- 15,4
A propriedade CSS abreviada contain-intrinsic-size é compatível com o Firefox 107, juntamente com contain-intrinsic-width, contain-intrinsic-height e propriedades lógicas contain-intrinsic-block-size e contain-intrinsic-inline-size.
Eles são aplicados para especificar o tamanho de um elemento da interface que está sujeito à contenção de tamanho. Isso permite que um user agent determine o tamanho de um elemento sem precisar renderizar os elementos filhos. Eles são úteis quando um elemento está sujeito a contenção de tamanho.
Suporte para a palavra-chave avoid de fragmentação de CSS
O Chrome 108 inclui suporte ao valor avoid das propriedades de fragmentação CSS break-before, break-after e break-inside na impressão. Esse valor instrui o navegador a evitar interrupções antes, depois ou dentro do elemento ao qual é aplicado. Por exemplo, o CSS a seguir evita que uma figura seja quebrada em uma quebra de página.
figure {
break-inside: avoid;
}
Isso se deve à inclusão do suporte de impressão usando o LayoutNG, o que traz uma experiência moderna e menos cheia de bugs. Saiba mais sobre o LayoutNG.
API Federated Credential Management
A API Federated Credential Management (FedCM) fornece uma abstração para os fluxos de identidade federada na Web. Ele expõe uma caixa de diálogo mediada pelo navegador que permite aos usuários escolher contas de provedores para fazer login em sites. A FedCM está sendo lançada no Chrome 108. Saiba mais na postagem do blog de anúncio da FedCM (em inglês).
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. Devido às datas de lançamento, a única nova versão Beta deste mês é o Firefox 108, e o Safari 16.2 ainda está em andamento.
O Firefox 108 oferece suporte aos atributos height e width para o elemento <source>, quando ele é filho de um elemento <picture>. Esses atributos aceitam a altura ou largura da imagem, em pixels, como um número inteiro sem uma unidade.
A implementação de consultas de contêiner está em andamento no Firefox. Por trás da sinalização layout.css.container-queries.enabled no Firefox 108 Beta, você encontrará as unidades de tamanho da consulta do contêiner (cqw, cqh, cqi, cqb, cqmin, cqmax). Essas são unidades de comprimento relativas ao tamanho de um contêiner de consulta.
Parte da série para iniciantes na Web