Consultas de contêiner e :has() são uma correspondência feita no paraíso responsivo. Felizmente, os dois recursos serão lançados em conjunto no Chromium 105. Este é um lançamento enorme com dois recursos muito solicitados para interfaces responsivas.
Consultas de contêiner: um breve resumo
As consultas de contêiner permitem que os desenvolvedores consultem um seletor pai sobre as informações de tamanho e estilo, possibilitando que um elemento filho tenha a própria lógica de estilo responsivo, não importa onde ele esteja na página da Web.
Em vez de depender da janela de visualização para definir o estilo, como o espaço disponível, os desenvolvedores agora também podem consultar o tamanho dos elementos in-page. Esse recurso significa que um componente é proprietário da lógica de estilo responsivo. Isso torna o componente muito mais resiliente, porque a lógica de estilo é vinculada a ele, não importa onde ele apareça na página.
Como usar consultas de contêiner
Para criar com consultas de contêiner, primeiro defina a contenção em um elemento pai. Para isso, defina um container-type no contêiner pai. É possível ter um card com imagem e conteúdo de texto semelhante a este:
Para criar uma consulta de contêiner, defina container-type no contêiner do card:
.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 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;
}
}
O seletor pai :has()
A pseudoclasse :has() do CSS permite que os desenvolvedores verifiquem se um elemento pai contém filhos com parâmetros específicos.
Por exemplo, p:has(span) indica um seletor de parágrafo (p), que tem um span dentro dele. Você pode usar isso para definir o estilo do parágrafo pai ou de qualquer elemento dele. Um exemplo útil é o figure:has(figcaption) para estilizar um elemento figure que contenha uma legenda. Saiba mais sobre :has() neste artigo de Jhey Tompkins.
Consultas de contêiner e :has()
É possível combinar os poderes de seleção pai de :has() com os recursos de consulta pai das consultas de contêiner para criar estilos intrínsecos realmente dinâmicos.
Vamos expandir o primeiro exemplo com a carta de foguete. E se você tivesse um cartão sem uma imagem? Talvez você queira aumentar o tamanho do título e ajustar o layout de grade para uma coluna única, para que ele pareça mais intencional sem a imagem.
Neste exemplo, o cartão com uma imagem tem um modelo de grade de duas colunas, enquanto o cartão sem a imagem tem um layout de coluna única. Além disso, o card sem a imagem tem um cabeçalho maior. Para escrever isso usando :has(), use o seguinte CSS.
.card:has(.visual) {
grid-template-columns: 1fr 1fr;
}
Você está procurando um elemento com uma classe visual para aplicar o estilo de duas colunas acima. Outra função CSS interessante é :not(). Isso faz parte das mesmas especificações que :has(), mas está disponível há muito mais tempo e tem melhor suporte ao navegador. É possível até combinar :has() e :not() desta maneira:
.card:not(:has(.visual)) h1 {
font-size: 4rem;
}
No código acima, você está criando um seletor que define o estilo de uma h1 em um card que não contém uma classe visual. É assim que você pode ajustar o tamanho da fonte de forma muito clara.
Como tudo funciona em conjunto
A demonstração acima mostra uma combinação de :has(), :not() e @container, mas as consultas de contêiner se destacam quando o mesmo elemento é usado em vários lugares. Vamos adicionar um toque de estilo e mostrar esses cards em uma grade lado a lado.
Agora você realmente pode conferir o poder do CSS moderno. Conseguimos escrever estilos claros usando estilos direcionados que constroem uma lógica sobre ela e criam componentes realmente robustos. Com esses dois recursos avançados chegando ao Chromium 105 e ganhando força no suporte entre navegadores, é um momento muito empolgante para ser um desenvolvedor de interface do usuário.