Primeira vez na plataforma da Web em outubro

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

Rachel Andrew

Versões estáveis do navegador

Em outubro, o Firefox 106, o Chrome 107 e o Safari 16.1 se tornaram estáveis. Vamos analisar o que isso significa para a plataforma da Web.

Animação das faixas da grade

Graças ao trabalho dos nossos colaboradores na Microsoft, o Chrome agora pode interpolar valores de grid-template-columns e grid-template-rows. Isso significa que os layouts de grade podem fazer a transição entre estados de forma suave, em vez de ajustar no meio de uma animação ou transição.

Passe o cursor sobre os avatares para ver a animação. Este exemplo é do artigo Layouts de grade animados do CSS, onde você pode saber mais.

Compatibilidade com navegadores

• 107
• 107
• 66
• 16

Adições à getDisplayMedia()

Além disso, o Chrome tem algumas adições ao getDisplayMedia() que têm como objetivo evitar o compartilhamento acidental de informações ao compartilhar a tela.

• A opção displaySurface pode indicar que o app da Web prefere oferecer um tipo específico de superfície de exibição (guias, janelas ou telas).
• A opção surfaceSwitching indica se o Chrome deve permitir que o usuário alterne dinamicamente entre guias compartilhadas.
• A opção selfBrowserSurface pode ser usada para impedir que o usuário compartilhe a guia atual. Isso evita o efeito "salão de espelhos".
• A opção systemAudio garante que o Chrome ofereça apenas capturas de áudio relevantes para o usuário.

O Safari 16.1 também inclui suporte a getDisplayMedia, adicionando suporte para capturar uma janela específica do Safari.

Teste de suporte a recursos e tecnologias de fontes do CSS

O Firefox adicionou as funções font-tech() e font-format() às consultas de recursos com @supports. O exemplo a seguir testa o suporte a fontes COLRv1.

@supports font-tech(color-COLRv1) {

}

Confira mais exemplos no MDN.

Rolar até o fragmento de texto

O Safari 16.1 inclui suporte para rolar até o fragmento de texto, que adiciona suporte à navegação até um URL com um fragmento de texto específico especificado.

Suporte a AVIF

O Safari 16 incluiu suporte a imagens AVIF estáticas, o Safari 16.1 oferece suporte a imagens AVIF animadas no macOS Ventura, iOS 16 e iPadOS 16.

Push da Web para Safari

O Safari 16.1 oferece suporte a notificações push da Web no macOS Ventura. Isso usa a API Push e a API Notifications. Saiba mais no artigo Push na Web do Meet. A página de destino do Web Push no Safari agora está disponível nos três principais mecanismos.

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. As novas versões Beta deste mês são o Chrome 108, o Firefox 107 e o Safari 16.2.

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;
}

O Chrome 108 começa a implementar uma mudança na forma como o overflow se comporta em elementos substituídos, o que pode causar mudanças visuais em algumas circunstâncias. Leia o artigo Uma alteração ao estouro em elementos substituídos no CSS para saber mais detalhes e saber como resolver problemas encontrados.

Há uma mudança no comportamento da janela de visualização de layout no Chrome para Android quando o teclado na tela é mostrado. Leia o artigo Preparar-se para as mudanças no comportamento de redimensionamento da janela de visualização no Chrome no Android para saber mais e descobrir como se preparar para a estabilidade do envio no próximo mês.

O Chrome também tem as novas unidades de viewport do 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 Firefox 107 ativa o suporte à fonte COLRv1, se juntando ao Chrome no suporte a essa tecnologia de fonte. Também em fontes, o Chrome 108 adiciona suporte para as funções font-tech() e font-format() para consultas de recursos com @supports.

O Firefox também adiciona suporte a contain-intrinsic-size, se juntando ao Chrome para criar dois navegadores com suporte a esse recurso.

A versão Beta 16.2 do Safari inclui várias correções de CSS, incluindo dimensionamento e ajuste de rolagem.

Parte da série na Web do Google