Esta página foi traduzida pela API Cloud Translation.

Primeira vez na plataforma da Web em outubro

Descubra alguns dos recursos interessantes que chegaram aos 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 ficaram estáveis. Vamos dar uma conferida no que isso significa para a plataforma da Web.

Animação de faixas de grade

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

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

Compatibilidade com navegadores

Adições a `getDisplayMedia()`

Também no Chrome, há algumas adições ao getDisplayMedia() para evitar compartilhamento excessivo acidental de tela.

A opção displaySurface pode indicar que o app da Web prefere oferecer um tipo de plataforma de exibição específico (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 "campo de espelhos".
A opção systemAudio garante que o Chrome só ofereça uma captura de áudio relevante para o usuário.

O Safari 16.1 também é compatível com getDisplayMedia, adicionando suporte à captura de uma janela específica do Safari.

Testes de suporte à tecnologia de fontes e recursos do CSS

O Firefox adicionou as funções font-tech() e font-format() para apresentar consultas com @supports. O exemplo a seguir testa a compatibilidade com fontes COLRv1.

@supports font-tech(color-COLRv1) {

}

Confira mais exemplos no MDN.

Rolar até o fragmento de texto

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

Suporte a AVIF

O Safari 16 tinha suporte para imagens AVIF, enquanto o Safari 16.1 oferece suporte para imagens AVIF animadas no macOS Ventura, iOS 16 e iPadOS 16.

Push da Web para Safari

O Safari 16.1 oferece suporte a push da Web no Safari no macOS Ventura. Esse recurso usa as APIs Push e Notifications. Leia mais sobre isso no artigo Meet Web Push. O acesso por push da Web no Safari significa que agora ele está disponível nos três principais mecanismos.

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 deste mês são Chrome 108, Firefox 107 e Safari 16.2.

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

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

Há uma mudança na forma como a janela de visualização de layout se comporta no Chrome no 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 que estão chegando ao Chrome no Android para saber mais e descobrir como se preparar para a estabilidade no próximo mês.

No Chrome, também 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 Firefox 107 ativa o suporte à fonte COLRv1, além do Chrome, para oferecer suporte a essa tecnologia de fontes. Ainda em fontes, o Chrome 108 adiciona suporte às funções font-tech() e font-format() para apresentar consultas com @supports.

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

O Safari 16.2 Beta inclui várias correções de CSS, incluindo dimensionamento e ajuste de rolagem.

Parte da série para iniciantes na Web