Primeira vez na plataforma da Web em março

Descubra alguns dos recursos interessantes que chegaram aos navegadores da Web Stable e Beta em março de 2022.

Rachel Andrew

Versões estáveis do navegador

Em março, o Chrome 99, o Chrome 100, o Firefox 98 e o Safari 15.4 ficaram estáveis. Isso trouxe um monte de novos recursos para a plataforma, e muitas dessas adições significaram que o recurso ficou disponível nos três mecanismos de navegador. Neste post, me concentrei nas adições que oferecem interoperabilidade entre navegadores, mas confira as notas da versão para conferir todos os recursos adicionados a cada mecanismo.

O Chrome 99 e o Safari 15.4 incluíram camadas em cascata. A regra @layer define uma camada em cascata, ajudando você a controlar a especificidade. Eles se juntam ao Firefox e, portanto, o Cascade Layers agora está disponível em todos os três mecanismos de navegador. Saiba mais sobre as camadas em casca em As camadas em casca estão chegando ao seu navegador.

Compatibilidade com navegadores

  • Chrome: 99.
  • Borda: 99.
  • Firefox: 97.
  • Safari: 15.4.

Origem

O Chrome 100 inclui o novo valor de plus-lighter para a propriedade CSS mix-blend-mode. Esse valor é útil para fazer o cross-fading de dois elementos quando todos ou um subconjunto de pixels têm os mesmos valores. Leia mais sobre o problema resolvido em O desfoque cruzado de dois elementos do DOM é impossível no momento.

Compatibilidade com navegadores

  • Chrome: 100.
  • Edge: 100.
  • Firefox: 99.
  • Safari: 9.1.

O Safari 15.4 inclui a propriedade contain, permitindo a contenção de CSS.

Compatibilidade com navegadores

  • Chrome: 52.
  • Edge: 79.
  • Firefox: 69.
  • Safari: 15.4.

Origem

O Safari 15.4 também tem accent-color, que permite controlar a cor de destaque usada em alguns controles de formulário.

Compatibilidade com navegadores

  • Chrome: 93.
  • Edge: 93.
  • Firefox: 92.
  • Safari: 15.4.

Origem

O Firefox 98 e o Safari 15.4 lançaram o elemento <dialog>, que representa uma caixa de diálogo.

Compatibilidade com navegadores

  • Chrome: 37.
  • Edge: 79.
  • Firefox: 98.
  • Safari: 15.4.

Origem

O Safari 15.4 também oferece suporte à pseudoclasse :focus-visible. O trabalho de implementação relacionado a isso foi feito pela Igalia.

Compatibilidade com navegadores

  • Chrome: 86.
  • Edge: 86.
  • Firefox: 85.
  • Safari: 15.4.

Origem

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 de março foram o Chrome 101 e o Firefox 99.

O Chrome 101 Beta inclui a notação de cores hwb. Isso especifica a cor de acordo com a matiz, a brancura e a escuridão. Como acontece com outras notação de cores, um componente alfa opcional especifica a opacidade.

h1 {
  color: hwb(194 0% 0% / .5) /* #00c3ff with 50% opacity */
}

Compatibilidade com navegadores

  • Introdução ao Chrome.
  • Borda: 101.
  • Firefox: 96.
  • Safari: 15

Origem

O Firefox 99 inclui a propriedade pdfViewerEnabled da interface do Navegador. Essa propriedade indica se o navegador oferece suporte à exibição inline de arquivos PDF.

if (!navigator.pdfViewerEnabled) {
  // The browser does not support inline viewing of PDF files.
}

Compatibilidade com navegadores

  • Chrome: 94.
  • Borda: 94.
  • Firefox: 99.
  • Safari: 16.4.

Origem

Esses recursos Beta estarão disponíveis em navegadores estáveis em breve.

Parte da série na Web do Google