CSS Container Queries: Uma abordagem moderna para design responsivo

CSS Container Queries é uma ferramenta inovadora que permite registrar um elemento como “container” e aplicar estilos a outros elementos quando esse container atende a certas condições.

Ao contrário das consultas de mídia tradicionais, que eram o padrão ouro no design web responsivo, as consultas de contêiner permitem criar layouts que reagem ao tamanho do contêiner em vez do tamanho da janela de visualização. Isso é especialmente útil em componentes complexos, onde os tamanhos dos elementos podem variar significativamente.

.parent {
  container-name: hero-banner;
  container-type: inline-size;

  /* ou container: hero-banner / inline-size; */
}

.child {
  display: flex;
  flex-direction: column;
}

/* Quando o contêiner tem mais de 60 caracteres... */
@container hero-banner (width > 60ch) {
  /* Mudamos a direção flex-элементов .child. */
  .child { 
    flex-direction: row;
  }
}

Por que usar CSS Container Queries?

Controle sobre os elementos de acordo com o tamanho do contêiner: Com o uso de consultas de contêiner, os elementos podem ser ajustados conforme o tamanho de seus contêineres, em vez do tamanho da janela de visualização.
Previsibilidade dos estilos: As consultas de contêiner permitem definir todos os estilos para um determinado elemento de forma mais previsível.
Reutilização: Componentes criados com consultas de contêiner são facilmente transferidos para outros projetos e se comportarão de maneira igualmente previsível.
Novos tipos de unidades de medida: Introduzem novos tipos de unidades CSS que podem ser usadas para definir tamanhos de elementos com base nos tamanhos de seus contêineres.

As consultas de contêiner são uma ferramenta poderosa que amplia as possibilidades do design responsivo, tornando-o mais flexível e previsível.

Registro de elementos como contêineres

Para usar CSS Container Queries, é necessário registrar um elemento como contêiner. Isso é feito usando a propriedade container.

.cards {
  container-name: card-grid;
  container-type: inline-size;

  /* Podemos usar mais curto */
  container: card-grid / inline-size;
}

Neste exemplo, um contêiner com o nome card-grid está sendo criado, o qual pode ser consultado pelo seu inline-size (largura no modo horizontal de página).

Propriedades de registro de contêineres:

container-name: Registra um elemento como contêiner, permitindo aplicar estilos a outros elementos com base em suas dimensões.
container-type: Define o tipo de contêiner que pode aplicar estilos a outros elementos sob condições específicas.
container: Uma forma abreviada que combina as propriedades container-name e container-type em uma declaração única.

Pontos importantes ao registrar contêineres:

container-name (nome do contêiner):
- Esta propriedade não é obrigatória.
- Um contêiner sem nome corresponderá a qualquer consulta de contêiner que não esteja direcionada a um contêiner específico, o que pode resultar em correspondência com várias condições.
container-type (tipo de contêiner):
- Esta propriedade é obrigatória se quisermos consultar o contêiner pelo seu tamanho ou inline-size.
- size permite consultar o contêiner pelo seu tamanho (largura ou altura).
- inline-size permite consultar o contêiner pelo seu inline-size, equivalente à largura no modo padrão horizontal de página.
container:
- Uma forma abreviada que une container-name e container-type.

Características adicionais:

Um contêiner não pode alterar seus próprios estilos, mas pode alterar os estilos de seus elementos internos.
O contêiner deve ter um tamanho explicitamente definido, pois seu conteúdo não deve afetar suas dimensões.

Exemplo de uso:

@container card-grid (inline-size > 500px) {
  .card-item {
    display: flex;
    flex-direction: row;
  }
}

Neste exemplo, quando a largura do contêiner card-grid excede 500px, os elementos com a classe card-item serão alinhados em uma linha.

Alguns detalhes importantes sobre o uso de Consultas de Contêineres em CSS:

Contêineres sem nome: Se um contêiner não tiver um nome, ele corresponderá a qualquer consulta que não esteja direcionada a um contêiner específico.
Tamanho do contêiner: A propriedade container-type deve ser definida como size ou inline-size para consultar o tamanho do contêiner.
Consultas podem ser combinadas: É possível usar operadores lógicos como and, or e not para criar condições mais complexas.

Consultas de contêineres

As Consultas de Contêineres em CSS permitem aplicar estilos aos elementos com base em condições relacionadas ao tamanho do contêiner. Isso é feito usando a regra @container, que funciona de maneira semelhante às media queries, mas é orientada ao tamanho do contêiner, não à janela de visualização.

Exemplo de consulta ao contêiner:

@container my-container (width > 60ch) {
  article {
    flex-direction: row;
  }
}

Neste exemplo, se a largura do contêiner my-container exceder 60 caracteres (ch), a direção dos elementos flex dentro do elemento article será alterada para linha (row).

Aspectos principais do pedido ao contêiner:

@container: Esta diretiva informa ao navegador que estamos lidando com uma consulta de contêiner, não uma consulta de mídia.
Nome do contêiner: A parte my-container refere-se ao nome do contêiner conforme definido na propriedade container-name.
Condição da consulta: (width > 60ch) – condição na qual o estilo é aplicado. Neste caso, é a largura do contêiner que excede 60 caracteres.

Pontos importantes:

Nome do contêiner não é obrigatório:
- Se o nome do contêiner não for especificado, qualquer contêiner registrado corresponderá às condições quando forem atendidas.
Consulta de tamanho do contêiner:
- É possível consultar o tamanho do contêiner se a propriedade container-type estiver definida como size ou inline-size.
Suporte a diferentes tipos de comprimento:
- Além da largura (inline-size), é possível consultar a proporção de aspecto (aspect-ratio), altura (block-size) e orientação (por exemplo, retrato ou paisagem).
Suporte à sintaxe de intervalo:
- As consultas suportam operadores como maior que (>), menor que (<), igual a (=), maior ou igual a (>=) e menor ou igual a (<=).
Capacidade de combinar consultas:
- É possível criar condições complexas usando operadores lógicos como and, or e not.

Exemplo de consulta combinada:

@container (width > 500px) and (height > 300px) {
  .box {
    background-color: lightblue;
  }
}

No exemplo mencionado, se a largura do contêiner exceder 500 pixels e a altura exceder 300 pixels, o fundo do elemento com a classe .box será alterado para uma cor azul claro.

Container Queries expandem significativamente as capacidades do design responsivo na web, tornando-o mais flexível e previsível. Elas permitem aplicar estilos aos elementos com base em condições relacionadas ao tamanho de seus contêineres, o que é especialmente útil em componentes e layouts complexos.

Propriedades e valores das consultas de contêineres

Para utilizar eficazmente as CSS Container Queries, é importante compreender as principais propriedades e valores que elas oferecem. Vamos considerar as propriedades principais: container-name, container-type e a propriedade abreviada container.

Para o valor none:

Valor padrão. O elemento não tem um nome de contêiner. Geralmente, este valor não é explicitamente usado, pois seu propósito é definir o comportamento padrão.

Para <custom-ident>:

É um identificador personalizado que pode ser qualquer nome, exceto palavras reservadas como default, none, at, no, ou or.

.cards {
  container-name: card-grid;
}

O container-type é uma propriedade utilizada em CSS Container Queries para especificar o tipo de consulta que será feita com base nas dimensões do contêiner. Ele pode ter os seguintes valores principais:

size: Permite consultar o tamanho total do contêiner, incluindo largura e altura.
inline-size: Permite consultar a largura do contêiner no modo horizontal (o equivalente ao width em contextos não containerizados).
Outros valores podem incluir aspect-ratio, block-size e orientação (portrait ou landscape), dependendo das necessidades específicas de design e layout.

Esses tipos de consulta são fundamentais para aplicar estilos dinamicamente com base nas características dimensionais dos contêineres, proporcionando maior controle e flexibilidade no design responsivo.

element {
  container-type: normal | size | inline-size;
}

normal: Um elemento que é considerado um contêiner de estilos, onde consultas são feitas com base nos estilos aplicados a ele, não necessariamente pelo tamanho físico do contêiner. Todos os elementos por padrão são contêineres de estilos, então esse valor raramente é definido explicitamente.

size: Permite consultar o contêiner com base em seu tamanho físico, podendo ser largura, altura ou ambos.
inline-size: Permite consultar o contêiner com base em sua largura no modo horizontal padrão de leitura (como equivalente a largura em contextos não containerizados).

Unidades de Medida de Contêineres

CSS Container Queries introduzem novos tipos de unidades de medida que permitem definir o tamanho dos elementos em relação ao tamanho do contêiner. Largura e Altura do Contêiner

cqw (Container Query Width): 1% da largura do contêiner consultado.
cqh (Container Query Height): 1% da altura do contêiner consultado.

Essas unidades permitem criar estilos mais flexíveis e adaptáveis, que dependem das dimensões dos contêineres, sendo especialmente úteis em layouts e componentes complexos de páginas da web.

Direções Lógicas do Contêiner

cqi (Container Query Inline Size): 1% do inline-size do contêiner (largura no modo horizontal padrão de leitura).
cqb (Container Query Block Size): 1% do block-size do contêiner (altura no modo horizontal padrão de leitura).

Essas unidades de medida permitem ajustar dinamicamente os estilos com base nas dimensões específicas do contêiner, proporcionando maior flexibilidade no design responsivo.

Mínimos e Máximos Tamanhos do Contêiner

cqmin (Container Query Minimum Size): É o valor entre cqi ou cqb, dependendo de qual deles for menor.
cqmax (Container Query Maximum Size): É o valor entre cqi ou cqb, dependendo de qual deles for maior.

Essas definições permitem definir estilos com base nas dimensões mínimas e máximas do contêiner, proporcionando controle detalhado sobre o comportamento adaptativo dos elementos.

.card {
  width: 50cqw; /* 50% da largura do container */
  height: 30cqh; /* 30% da altura do container */
}

Consultas de Estilo de Contêineres

As consultas de estilo de contêineres (Container Style Queries) permitem aplicar estilos aos elementos com base nos estilos de seus contêineres, não apenas em suas dimensões. Este é um poderoso recurso que permite estilizar elementos condicionalmente, baseando-se nos estilos de seus contêineres.

Exemplo de registro de contêiner de estilos:

article {
  container-name: card;
}

Neste exemplo, o elemento <article> é registrado como um contêiner com o nome “card”. No entanto, registrar um contêiner não é obrigatório, pois todos os elementos por padrão são considerados contêineres de estilos.

Uso de consultas de estilos de contêineres:

@container style(--bg-color: #000) {
  p { 
    color: #fff; 
  }
}

Exemplo com Propriedades Personalizadas:

Neste exemplo, se o valor da propriedade personalizada –bg-color do contêiner for preto (#000), a cor do texto dentro do parágrafo (p) será alterada para branco (#fff).

Principais Aspectos:

Sintaxe: Semelhante aos media queries, mas utilizando a diretiva @container em vez de @media.
Função style(): Define condições baseadas nos estilos do contêiner.
Propriedades Personalizadas: Consultas de estilos podem avaliar os valores das variáveis CSS (propriedades personalizadas).

.card-wrapper {
  --bg-color: #000;
}

.card {
  @container style(--bg-color: #000) {
    background-color: #fff;
  }
}

No exemplo dado, se o valor da propriedade personalizada –bg-color do contêiner for preto (#000), o fundo do elemento com a classe card será alterado para branco (#fff).

Vínculo de Estilos Aninhados

Os pedidos de estilo podem ser aninhados, permitindo criar condições mais complexas.

Exemplo de solicitação aninhada:

@container style(--featured: true) {
  article {
    grid-column: 1 / -1;
  }
  @container style(--theme: dark) {
    article {
      --bg-color: #000;
      --text: #fff;
    }
  }
}

No exemplo dado, se o valor da propriedade personalizada –featured do contêiner for verdadeiro, o elemento <article> ocupará todas as colunas da grade. Se dentro do mesmo contêiner o valor da propriedade personalizada –theme for dark, serão aplicados estilos adicionais que alteram a cor de fundo e do texto.

Especificação e Suporte dos Navegadores

As Queries de Contêiner CSS fazem parte da especificação CSS Containment Module Level 3, que, no momento desta escrita, está em fase de rascunho pelo editor. Compreender a especificação atual e o suporte dos navegadores é crucial para utilizar efetivamente essas capacidades no desenvolvimento web. Os principais pontos da especificação incluem:

Registro de Elementos como Contêineres: Utilização das propriedades container-name, container-type e container para registrar elementos como contêineres.
Queries para Contêineres: Uso da diretiva @container para criar condições baseadas nos tamanhos ou estilos do contêiner.
Propriedades e Valores: Descrição de diversas propriedades, como container-name, container-type, e a propriedade abreviada container.
Unidades de Medida: Introdução de novas unidades de medida, como cqw, cqh, cqi e cqb.

Suporte dos Navegadores

O suporte para Queries de Contêiner CSS varia conforme o navegador e o tipo de consulta (tamanho ou estilo). As consultas de tamanho de contêiner são mais amplamente suportadas, enquanto as consultas de estilo de contêiner ainda estão em fase experimental.

Suporte para Consultas de Estilo de Contêineres

As consultas de estilo de contêineres são suportadas de forma experimental e exigem a ativação de flags especiais nos navegadores. No momento da redação deste texto, o suporte a essas consultas é limitado e pode mudar à medida que são desenvolvidas e implementadas nos navegadores.

Blog