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.

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

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

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 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.

Testes 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 inclui suporte a imagens estáticas AVIF, e o Safari 16.1 inclui suporte a imagens animadas AVIF no macOS Ventura, iOS 16 e iPadOS 16.

Push da Web para Safari

O Safari 16.1 traz suporte a notificações push da Web para o Safari no macOS Ventura. Isso usa a API Push e a API Notifications. Leia mais sobre isso no artigo Conheça o Push da Web. 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 para o valor avoid das propriedades de fragmentação CSS break-before, break-after e break-inside ao imprimir. Esse valor informa ao navegador para evitar quebras antes, depois ou dentro do elemento em que ele é 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 mudança no overflow de elementos substituídos no CSS para mais detalhes e saber como resolver os problemas.

Há uma mudança no comportamento da janela de visualização de layout no Chrome 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 e descobrir como se preparar para o lançamento da versão estável 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 às 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 Novidades da Web