O web design responsivo tradicionalmente depende de consultas de mídia para ajustar layouts de acordo com as dimensões da janela de visualização. Essa abordagem funciona bem para alterações no nível da página, mas se torna menos conveniente quando o mesmo componente aparece em diferentes partes de um site.
Considere um cartão de produto usado em uma página de produto para desktop, uma barra lateral estreita e uma interface de compras móvel. O espaço disponível pode diferir significativamente em cada local, mesmo quando a janela do navegador permanece do mesmo tamanho. Uma consulta de mídia baseada em viewport nem sempre pode responder adequadamente a essas diferenças.
Contêiner CSS consultas oferecem uma solução mais flexível. Eles permitem que os componentes se adaptem às dimensões do elemento que os contém, em vez de depender exclusivamente da janela de visualização do navegador.
Para desenvolvedores que criam interfaces reutilizáveis, esse recurso pode simplificar o estilo responsivo e reduzir a necessidade de CSS específico de componente duplicado.
Compreendendo as consultas de contêiner CSS
Uma consulta de mídia avalia condições como largura da janela de visualização, preferências do usuário ou recursos do dispositivo. Uma consulta de contêiner, por outro lado, pode avaliar o tamanho de um contêiner designado.
Essa distinção é particularmente útil ao desenvolver componentes de UI reutilizáveis. Em vez de perguntar se a tela é larga o suficiente, um componente pode perguntar se o espaço disponível é suficiente para um layout específico.
Para usar consultas de contêiner de tamanho, os desenvolvedores primeiro estabelecem um contêiner de consulta com o container-type propriedade.
.product-card {
container-type: inline-size;
}
O inline-size value permite consultar a dimensão embutida disponível do contêiner. Nos modos comuns de escrita horizontal, isso corresponde à sua largura.
Uma vez estabelecido o contêiner, seus descendentes podem responder ao seu tamanho:
@container (min-width: 32rem) {
.product-card__content {
display: grid;
grid-template-columns: 8rem 1fr;
gap: 1rem;
align-items: center;
}
}
Quando o contêiner relevante atinge o tamanho in-line mínimo especificado, o conteúdo muda para um layout de duas colunas.
O detalhe importante é que a consulta responde ao contêiner, não diretamente à janela de visualização. Um cartão dentro de uma barra lateral estreita pode, portanto, manter sua apresentação compacta mesmo em uma tela grande de desktop.
Construindo um cartão de produto responsivo
Um cartão de produto é um exemplo prático porque o mesmo componente geralmente aparece em vários layouts.
Comece com HTML semântico:
<article class="product-card">
<img
class="product-card__image"
src="/images/desk-lamp.jpg"
alt="Adjustable desk lamp"
width="480"
height="320"
>
<div class="product-card__content">
<h2 class="product-card__title">Adjustable Desk Lamph2>
<p class="product-card__description">
A compact lighting solution for home offices
and study spaces.
p>
<a class="product-card__link" href="/products/desk-lamp">
View product
a>
div>
article>
O
A seguir, adicione um layout padrão que funcione em espaços estreitos:
.product-card {
container-type: inline-size;
border: 1px solid #d8dee8;
border-radius: 0.75rem;
overflow: hidden;
background: #fff;
}
.product-card__image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.product-card__content {
padding: 1rem;
}
.product-card__title {
margin-block: 0 0.5rem;
font-size: 1.25rem;
}
.product-card__description {
line-height: 1.6;
}
.product-card__link {
display: inline-block;
margin-block-start: 0.5rem;
}
Esta versão empilha a imagem e o texto verticalmente, tornando-a adequada para espaços compactos.
Uma consulta de contêiner pode introduzir uma disposição horizontal quando o componente tiver espaço suficiente:
@container (min-width: 32rem) {
.product-card {
display: grid;
grid-template-columns: minmax(10rem, 0.8fr) 1.2fr;
align-items: center;
}
.product-card__image {
height: 100%;
aspect-ratio: auto;
}
}
O cartão agora tem duas apresentações possíveis sem a necessidade de HTML separado para desktop e celular.
Um detalhe de implementação merece atenção: as dimensões do contêiner de consulta dependem do layout pai. Os desenvolvedores devem testar o componente dentro de estruturas de páginas realistas, especialmente ao usar layouts de grade ou flexíveis, para garantir que o contêiner receba o espaço disponível pretendido.
Consultas de contêiner e consultas de mídia resolvem problemas relacionados, mas diferentes. Nenhum substitui o outro inteiramente.
| Exigência | Abordagem recomendada |
|---|---|
| Altere a navegação principal em telas menores | Consulta de mídia |
| Adapte um cartão reutilizável à largura do pai | Consulta de contêiner |
| Alterar o espaçamento de toda a página em um ponto de interrupção | Consulta de mídia |
| Ajustar um widget dentro de um painel | Consulta de contêiner |
| Responder às preferências de movimento reduzido | Consulta de mídia |
Uma consulta de mídia é apropriada quando a página inteira precisa ser alterada de acordo com a janela de visualização. Uma consulta de contêiner é útil quando um componente individual precisa responder ao seu layout local.
A combinação de ambas as técnicas geralmente produz a implementação mais clara. Por exemplo, uma consulta de mídia pode alterar a grade geral do painel, enquanto as consultas de contêiner ajustam cartões de painel individuais à medida que seus painéis se expandem ou contraem.
Use contêineres nomeados para obter mais controle
Quando uma página contém vários contêineres aninhados, as consultas nomeadas podem tornar o relacionamento pretendido mais claro.
.dashboard-panel {
container: dashboard-panel / inline-size;
}
@container dashboard-panel (min-width: 40rem) {
.dashboard-panel__content {
grid-template-columns: 1fr 1fr;
}
}
O container a abreviação atribui um nome e estabelece o tipo de consulta do contêiner.
Os contêineres nomeados são especialmente úteis em projetos maiores onde os componentes possuem layouts aninhados. Eles facilitam a comunicação da intenção de consulta e ajudam a evitar atingir acidentalmente um ancestral elegível não intencional.
Os desenvolvedores ainda devem escolher os nomes dos contêineres com cuidado e manter os estilos dos componentes compreensíveis. As consultas de contêiner adicionam flexibilidade, mas um número excessivo de regras aninhadas pode dificultar a manutenção de um sistema de design.
Erros comuns a evitar
Embora as consultas de contêiner sejam relativamente simples, alguns detalhes de implementação podem criar resultados inesperados.
Esquecendo de estabelecer um contêiner: Uma consulta de tamanho precisa de um contêiner de consulta apropriado. Sem ele, o estilo esperado baseado em contêiner não será aplicado.
Usando pontos de interrupção da viewport para cada componente: Isso pode criar acoplamento desnecessário entre componentes reutilizáveis e o layout geral da página. Use consultas de contêiner quando o espaço local disponível for a condição relevante.
Supondo que todas as propriedades CSS possam ser consultadas: As consultas de tamanho de contêiner são projetadas em torno de recursos e condições de contêiner compatíveis. Verifique as especificações relevantes antes de assumir que estilos arbitrários ou propriedades de elementos podem ser usados como condições de consulta.
Ignorando o comportamento de fallback: Um componente deve ter um layout padrão sensato antes que estilos aprimorados de consulta de contêiner sejam aplicados. Teste a experiência nos navegadores suportados pelo seu projeto.
Complicando regras responsivas: Mais pontos de interrupção não produzem automaticamente interfaces melhores. Comece pelo conteúdo do componente e introduza uma alteração de layout apenas quando o espaço disponível o justificar.
Teste o suporte do navegador e layouts reais
As consultas de contêiner são suportadas em navegadores modernos, mas os projetos de produção devem verificar os requisitos do navegador de destino usando Posso usar e teste a interface real.
Um processo de teste útil inclui redimensionar contêineres pais independentemente da janela de visualização, verificar títulos longos e textos traduzidos e inspecionar como as imagens e os controles se comportam em larguras intermediárias.
Os desenvolvedores também devem testar componentes em diferentes contextos, em vez de depender de uma única página de demonstração. Um cartão que funciona em uma área de conteúdo de largura total pode se comportar de maneira diferente dentro de uma barra lateral ou grade do painel.
Para bibliotecas de componentes reutilizáveis, exemplos isolados e testes de regressão visual podem ajudar a identificar alterações não intencionais quando os estilos responsivos são atualizados.
Conclusão
As consultas de contêiner CSS oferecem aos desenvolvedores uma maneira prática de criar componentes que respondam ao espaço disponível em seu layout imediato. Eles são particularmente valiosos para cartões de produtos, widgets de painel, blocos de conteúdo reutilizáveis e bibliotecas de componentes que devem funcionar em diferentes estruturas de páginas.
A estratégia mais eficaz é usar consultas de mídia para decisões em nível de janela de visualização e consultas de contêiner para adaptação em nível de componente. Com HTML significativo, estilos padrão sensatos e testes cuidadosos, os desenvolvedores podem criar interfaces responsivas que são mais fáceis de reutilizar e manter.
As consultas de contêiner não eliminam todos os desafios de design responsivo, mas fornecem uma maneira mais orientada a componentes de resolver muitos deles com CSS nativo.
