Como usar consultas de contêiner em CSS

Por muito tempo, as consultas de mídia foram a única maneira de tornar os designs de interface do usuário responsivos em diferentes tamanhos de tela. Mas mesmo isso tinha suas limitações. Um dos maiores problemas com o uso de consultas de mídia era que você só poderia estilizar um elemento em resposta a alterações no tamanho da tela, não no elemento de contêiner mais próximo.

As consultas de contêineres foram introduzidas para resolver esse problema. Eles também aumentaram com a popularidade de estruturas como React e Vue.js, que funcionam criando "componentes" modulares de interface do usuário. Aprenda a usar consultas de contêiner para criar elementos responsivos em seu CSS.

O código usado neste artigo está disponível neste Repositório GitHub e é gratuito para você usar sob a licença do MIT.

Por que você deve usar consultas de contêiner CSS?

Para entender a importância das consultas de contêiner, vamos usar um exemplo que facilita a compreensão do conceito. Mas primeiro, você precisa clonar o código inicial deste

Repositório GitHub.

Depois de clonar o repositório com êxito, execute o código. Você encontrará uma página da Web semelhante à imagem a seguir:

Aqui você tem um layout de grade composto por duas colunas: a seção principal e a barra lateral. A seção principal parece boa, mas a barra lateral (que é muito menor que o conteúdo principal) parece um pouco compactada.

O layout é responsivo. Ao encolher o navegador, você pode ver que o cartão se transforma em uma coluna vertical:

Em outras palavras, quando o conteúdo começa a ficar ilegível, o layout se transforma em uma coluna vertical onde a imagem é empilhada sobre o conteúdo. Esse efeito é resultado das consultas de mídia, que é a única maneira de determinar o tamanho dos elementos com base no tamanho total da tela.

Nesse caso, sempre que sua tela for menor que 800px, você empilha tudo um sobre o outro usando Flexbox alinhamento. Em telas maiores, colocamos o conteúdo lado a lado:

@meios de comunicação(largura máxima: 800px) {
.cartão {
direção flexível: coluna;
 }
.card-header { 
largura: 100%;
 }
}

Por muito tempo, as media queries foram um dos principais princípios de web design para criar layouts responsivos com CSS (e tem sido bom o suficiente para a maioria das coisas). Mas você certamente se deparará com cenários em que as consultas de mídia simplesmente não serão suficientes ou, pelo menos, não serão uma solução conveniente.

Um desses cenários é quando você tem uma barra lateral (como no exemplo acima). Nesses casos em que você tem uma barra lateral, você deve selecionar diretamente o cartão da barra lateral e tentar diminuí-lo:

.Barra Lateral.cartão {
/* Torna o cartão da barra lateral menor */
}
@meios de comunicação(largura máxima: 800px) {
/* Estilizar a página quando a tela for mais estreita que 800px */
}

Pode ser bastante complicado se você estiver trabalhando com muitos elementos, pois terá que selecionar manualmente todos os elementos e redimensioná-los. Você acabaria com mais código e complexidade extra.

É aqui que as consultas de contêiner podem ser úteis. Em vez de ser forçado a usar sua janela de visualização como dimensionamento, você pode usar qualquer elemento em sua página como um contêiner. Em seguida, esse contêiner pode ter suas próprias larguras nas quais você basearia suas consultas de mídia.

Como criar uma consulta de contêiner

Para criar uma consulta de contêiner, você começaria direcionando o elemento que deseja usar como contêiner (neste caso, a seção principal e a barra lateral). Dentro do bloco, você precisa definir o Tipo de recipiente para tamanho em linha:

principal, .Barra Lateral {
Tipo de recipiente: tamanho em linha
}

Quando você salvar seu arquivo CSS, nada mudará na página. Mas agora você pode usar consultas de contêiner para redimensionar e reestilizar os cartões aninhados na seção principal e na seção da barra lateral. Na consulta de contêiner a seguir, você está alterando os cartões para colunas verticais em telas com 500 pixels de largura ou menos:

@recipiente(largura máxima: 500 px) {
.cartão {
direção flexível: coluna;
 }
.card-header {
largura: 100%;
 }
}

Isso funcionará como uma consulta de mídia normal. Mas, em vez de medir o tamanho de sua tela, você está medindo o tamanho de seus contêineres (seções principal e lateral). Agora, quando seu contêiner tiver 500px ou mais, use a visualização horizontal. Caso contrário, você usa vertical (padrão para flexbox).

Na imagem acima, você pode ver que a barra lateral assume uma forma vertical porque é menor que 500px. Visto que o conteúdo principal mantém seu layout horizontal porque é maior que 500px. Se você encolher o navegador, a barra lateral e o conteúdo principal usarão o alinhamento vertical quando atingirem 500px ou menos.

A consulta de contêiner é incrivelmente poderosa porque permite redimensionar as coisas com base no contêiner em vez da largura inteira do navegador. Isso é especialmente útil ao lidar com componentes (como em React ou Vue).

Com consultas de contêiner, você pode redimensionar facilmente seus componentes de interface do usuário com base em seu contêiner, permitindo criar componentes totalmente independentes.

Nomeando Contêineres

Quando você cria um @recipiente consulta, ele primeiro procura o contêiner do elemento que você está direcionando na consulta. No nosso caso, este seria o contêiner principal e o contêiner da barra lateral.

E mesmo que as cartas estivessem dentro de outro recipiente, ele simplesmente ignoraria os outros recipientes e escolheria apenas o recipiente mais próximo dele. Isso faz parte de um amplo Conceito de CSS conhecido como seletores de CSS.

No exemplo a seguir, transformamos o elemento body em um contêiner:

corpo {
Tipo de recipiente: tamanho em linha;
}

Agora temos três contêineres separados: corpo, seção principal e lateral. Por padrão, os cartões que visamos na consulta de contêiner estão mais próximos da seção principal ou da barra lateral do que do corpo. Portanto, ele usa as seções principal e lateral como contêineres para a consulta do contêiner.

Para substituir esse comportamento, você precisa fazer duas coisas. Primeiro, você precisa dar ao elemento do corpo um nome de contêiner:

corpo {
Tipo de recipiente: tamanho em linha;
container-name: corpo;
}

Então, ao criar sua consulta de contêiner, você precisa especificar o nome do contêiner após @recipiente.

@recipiente corpo (largura máxima:1000 px){
/* Regras CSS que visam o contêiner do corpo */
}

Isso é útil se você quiser usar um elemento específico como um contêiner em vez do contêiner mais próximo do elemento que está direcionando. Em outras palavras, você pode selecionar qualquer contêiner específico e ajustar seu layout.

Unidades de Contêiner

Outra grande característica dos contêineres é que você pode usar unidades de contêiner. Essas unidades funcionam exatamente como unidades de viewport (elas são exatamente o mesmo tipo de unidade). No entanto, as unidades de contêiner usam cqw (para definir a largura) e cqh (para ajustar a altura). Essas unidades determinam a largura e a altura exatas do seu contêiner.

As consultas de contêiner CSS permitem que você use elementos específicos como pontos de referência para suas consultas de mídia. Essa técnica é bastante útil para criar elementos modulares e independentes que podem ser mantidos independentemente, independentemente do contêiner em que estão. Mas as consultas de contêiner usam os mesmos princípios das consultas de mídia, e isso é algo que você deve dominar se quiser ser um dos melhores desenvolvedores de CSS.