A plataforma da Web foi novidade em agosto

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

Em agosto, o Firefox 104, o Chrome 104 e o Chrome 105 se tornaram estáveis.

O Chrome 104 inclui propriedades individuais para transformações CSS. As propriedades são scale, rotate e translate, que podem ser usadas para definir individualmente essas partes de uma transformação.

Com isso, o Chrome se junta ao Firefox e ao Safari, que já oferecem suporte a essas propriedades.

Compatibilidade com navegadores

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 72.
  • Safari: 14.1.

Origem

Nova sintaxe de consulta de mídia

O Chrome 104 também inclui a sintaxe de intervalo de consulta de mídia. Isso já foi enviado pelo Firefox e ajuda a simplificar as consultas de mídia. Por exemplo, a seguinte consulta de mídia:

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Pode ser escrito usando um operador de comparação:

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

Compatibilidade com navegadores

  • Chrome: 104.
  • Edge: 104.
  • Firefox: 102.
  • Safari: 16.4.

Origem

Consultas em contêiner

O Chrome 105 é uma versão incrível que traz o recurso de consultas de contêiner para a plataforma da Web. Enquanto as consultas de mídia oferecem uma maneira de consultar o tamanho da janela de visualização, as consultas de contêiner oferecem um método de consulta do tamanho de um contêiner.

Compatibilidade com navegadores

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Origem

Para usar consultas de contêiner, ative a contenção usando a propriedade container-type.

.card-container {
  container-type: inline-size;
}

Definir container-type como inline-size consulta o tamanho da direção inline do elemento pai. Em idiomas latinos, como o inglês, essa seria a largura do card, já que o texto flui inline da esquerda para a direita.

Agora, podemos usar esse contêiner para aplicar estilos a qualquer um dos filhos usando @container:

.card {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@container (max-width: 400px) {
  .card {
    grid-template-columns: 1fr;
  }
}

Saiba mais sobre as consultas de contêiner na postagem @container e :has(): duas novas APIs responsivas do Chromium 105.

A pseudoclasse mãe :has()

A postagem mencionada acima também menciona :has(). Essa nova pseudoclasse A pseudoclasse CSS :has() oferece uma maneira de segmentar o elemento pai e os irmãos com base em condições. Saiba mais em :has() o seletor de família.

Compatibilidade com navegadores

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Origem

API Sanitizer

Também no Chrome 105, há a API Sanitizer. Essa API cria a higienização na plataforma para ajudar a remover vulnerabilidades de scripting entre sites.

A pseudoclasse CSS :modal também está disponível no Chrome 105. Isso corresponde a um elemento que está em um estado em que ele exclui toda interação com elementos externos. Por exemplo, um <dialog> aberto com a API showModal().

Compatibilidade com navegadores

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 103.
  • Safari: 15.6.

Origem

Os métodos findLast() e findLastIndex()

O Firefox 104 adiciona suporte a uma flag para os métodos Array.prototype.findLast(), Array.prototype.findLastIndex(), TypedArray.prototype.findLast() e TypedArray.prototype.findLastIndex(). Eles são usados para encontrar o valor e o índice (respectivamente) do último elemento em um Array ou TypedArray que corresponde a uma função de teste fornecida.

Compatibilidade com navegadores

  • Chrome: 97.
  • Edge: 97.
  • Firefox: 104.
  • 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.

Devido às datas de lançamento fora do mês, a única versão Beta lançada em agosto foi o Firefox 105, que ainda não tem muitos detalhes.

A versão Beta do Safari 16 mencionada em junho também ainda está em andamento.

Parte da série Novidades da Web