Descubra alguns dos recursos interessantes que chegaram aos 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 ficaram 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.
Ao fazer 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. Ele já foi desenvolvido pelo Firefox e ajuda a simplificar as consultas de mídia. Por exemplo, a consulta de mídia abaixo:
@media (min-width: 400px) {
// Styles for viewports with a width of 400 pixels or greater.
}
Pode ser escrita 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 é um lançamento empolgante que traz o tão esperado recurso de consultas de contêiner para a plataforma da Web. Embora as consultas de mídia ofereçam uma maneira de consultar o tamanho da janela de visualização, as consultas de contêiner oferecem um método de consultar o 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 o 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 em linha 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 APIs responsivas eficientes que chegam ao Chromium 105.
A pseudoclasse pai :has()
A postagem mencionada acima também menciona :has(). A nova pseudoclasse CSS :has() oferece uma maneira de segmentar o elemento pai e os irmãos com base nas condições. Saiba mais em :has(), o seletor de família.
API Sanitizer
No Chrome 105, também há a API Sanitizer. Essa API faz uma limpeza na plataforma para ajudar a remover vulnerabilidades de scripting em vários sites.
Também no Chrome 105 está a pseudoclasse CSS :modal. Corresponde a um elemento que está em um estado em que ele exclui todas as interações com elementos fora dele. Por exemplo, um <dialog> aberto com a API showModal().
Os métodos findLast() e findLastIndex()
O Firefox 104 adiciona suporte 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 uma matriz ou TypedArray que corresponda a uma função de teste fornecida.
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.
Como as datas de lançamento ocorriam logo após o mês, a única nova versão Beta em agosto foi o Firefox 105, que ainda não tem detalhes.
A versão Beta do Safari 16, mencionada em junho, também está em andamento.
Parte da série para iniciantes na Web