Descubra alguns dos recursos interessantes que foram lançados em navegadores da Web estáveis e Beta em agosto de 2022.
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á oferecem suporte a essas propriedades.
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.
}
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.
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.
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()
.
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.
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