Consultas de contêiner versus consultas de mídia

As consultas de mídia respondem às dimensões da janela de visualização. As consultas de contêiner respondem às dimensões do contêiner pai. Essa distinção determina qual ferramenta usar para cada problema.

Use consultas de mídia para:

• Mudanças globais no layout da página (uma ou duas colunas)
• Exibir ou ocultar grandes seções da página (gaveta de navegação em dispositivos móveis)
• Dimensionar a tipografia básica no nível da página
• Estilos de impressão
• Consultas de preferências do usuário (modo escuro, movimento reduzido)

Use consultas de contêiner para:

• Mudanças de layout no nível do componente (cartão horizontal ou vertical)
• Componentes colocados em contêineres desconhecidos (barra lateral, área principal, barra lateral dentro da área principal)
• Componentes reutilizáveis de um sistema de design
• Elementos incorporados em páginas de terceiros

Um cartão estilizado com consultas de mídia funciona em um ponto de quebra de uma página com 1200px de largura. Se esse cartão for movido para uma barra lateral, talvez precise de pontos de quebra diferentes. Com consultas de contêiner, o mesmo cartão simplesmente funciona: ele se adapta ao espaço disponível.

Aplicações reais usam ambos. As consultas de mídia definem o layout geral (a barra lateral existe em larguras de desktop); as consultas de contêiner definem o comportamento dos componentes dentro desse layout.

Ao contrário das consultas de mídia, que não adicionam especificidade, as consultas de contêiner adicionam especificidade contextual. Uma regra dentro de @container (min-width: 400px) tem a mesma especificidade que a mesma regra fora dele, mas só se aplica dentro desse contexto de contêiner.

As consultas de contêiner são compatíveis com todos os navegadores modernos desde 2023 (Chrome 105+, Firefox 110+, Safari 16+). Hoje, elas podem ser usadas com segurança em projetos novos, sem alternativas para navegadores modernos.

Para projetos que exigem suporte a navegadores mais antigos, use @supports para testar o suporte a consultas de contêiner:

As consultas de contêiner têm características próprias de desempenho: cada elemento com tipo de contêiner cria um limite de contenção de layout. Isso impede que mudanças de tamanho internas afetem o exterior, o que na verdade traz um benefício de desempenho. Mudanças nas consultas de mídia podem disparar recálculos globais de layout.

O Chrome DevTools exibe um selo "cq" ao lado dos elementos contêiner no painel Elementos. Clique nele para visualizar os limites do contêiner e testar as condições das consultas de contêiner com o inspetor de layout do DevTools.

Um componente de cartão de um sistema de design precisa alternar de um layout empilhado para um layout lado a lado, dependendo da largura disponível em qualquer contexto. Qual abordagem é melhor?

As consultas de mídia respondem à janela de visualização global; as consultas de contêiner respondem ao tamanho de um contêiner pai. Use consultas de mídia para decisões de layout global e consultas de preferências do usuário. Use consultas de contêiner para componentes reutilizáveis que precisam se adaptar ao contexto. Combine ambas: consultas de mídia para o layout geral da página e consultas de contêiner para a adaptação dos componentes dentro desse layout.