Plataforma da Web novidade em novembro

Descubra alguns dos recursos interessantes que foram lançados em navegadores da Web estáveis e Beta em novembro de 2022.

Rachel Andrew

Versões estáveis do navegador

Em novembro, o Firefox 107 e o Chrome 108 se tornaram estáveis. Vamos conferir o que isso significa para a plataforma da Web.

Mudança no comportamento da janela de visualização de layout do Chrome para Android

O comportamento do viewport de layout mudou no Chrome 108 para Android quando o teclado na tela é mostrado. Leia Prepare-se para as mudanças no comportamento de redimensionamento da viewport no Chrome para Android para saber mais.

Novas unidades de janela de visualização

O Chrome 108 também tem as novas unidades de viewport CSS. Eles incluem 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 de janela de visualização grandes, pequenas e dinâmicas.

A propriedade CSS abreviada contain-intrinsic-size tem suporte no Firefox 107, assim como as propriedades longas contain-intrinsic-width, contain-intrinsic-height e lógicas contain-intrinsic-block-size e contain-intrinsic-inline-size.

Elas são aplicadas 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 seus elementos filhos. Elas são úteis quando um elemento está sujeito a contenção de tamanho.

Suporte à palavra-chave avoid de fragmentação do CSS

O Chrome 108 inclui suporte ao valor avoid das propriedades de fragmentação de CSS break-before, break-after e break-inside durante a impressão. Esse valor informa ao navegador para evitar quebras antes, depois ou dentro do elemento em que é aplicado. Por exemplo, o CSS a seguir evita que uma figura seja dividida em uma quebra de página.

figure {
    break-inside: avoid;
}

Essa adição é devido à inclusão do suporte de impressão usando o LayoutNG, o que traz uma experiência moderna e com menos bugs. Saiba mais sobre o LayoutNG.

API Federated Credential Management

A API Federated Credential Management (FedCM) oferece uma abstração para fluxos de identidade federada na Web. Ele expõe uma caixa de diálogo mediada pelo navegador que permite que os usuários escolham contas de provedores de identificação para fazer login em sites. O FedCM está sendo enviado no Chrome 108. Saiba mais sobre ele na postagem do blog sobre o anúncio do FedCM.

Versões Beta do navegador

As versões Beta do navegador oferecem uma prévia dos recursos que vão estar na próxima versão estável do navegador. É um ótimo momento para testar novos recursos ou exclusões que possam afetar seu site antes que o mundo receba a versão. Devido às datas de lançamento, a única versão Beta nova deste mês é o Firefox 108, com o Safari 16.2 Beta ainda 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 a largura da imagem, em pixels, como um número inteiro sem unidade.

A implementação de consultas de contêiner está em andamento no Firefox. A flag layout.css.container-queries.enabled no Firefox 108 Beta contém as unidades de comprimento da consulta do contêiner: cqw, cqh, cqi, cqb, cqmin e cqmax. São unidades de comprimento relativas ao tamanho de um contêiner de consulta.

Parte da série na Web do Google