Esta página foi traduzida pela API Cloud Translation.

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.

Rachel Andrew

Versões estáveis do navegador

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

Transformações individuais

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á são compatíveis com essas propriedades.

Compatibilidade com navegadores

Origem

Sintaxe da consulta de mídia nova

O Chrome 104 também inclui a sintaxe do 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

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

Origem

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

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

Definir a container-type como inline-size consulta o tamanho da direção in-line do pai. Em idiomas latinos, como o inglês, essa seria a largura do cartão, 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 consultas de contêiner na postagem @container and :has(): duas novas e poderosas APIs responsivas que chegam ao 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

Origem

API Sanitizer

Também no Chrome 105, há a API Sanitizer. Essa API otimiza a plataforma para ajudar a remover vulnerabilidades de scripting em vários 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

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

Origem

Versões Beta do navegador

As versões Beta oferecem uma prévia do que será incluído na próxima versão estável do navegador. Esse é um ótimo momento para testar novos recursos, ou remoções, que podem afetar seu site antes do lançamento oficial.

Devido às datas de lançamento fora do mês, a única versão Beta lançada em agosto foi a 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