Construtor de consultas de contêiner CSS

• Construtor de consultas de contêiner visual: crie consultas de contêiner CSS visualmente com nosso construtor de consulta de contêiner interativo. Defina o tipo de contêiner (tamanho embutido, tamanho ou normal), adicione condições de consulta com operadores e unidades personalizados e defina estilos responsivos - tudo isso sem escrever uma única linha de CSS à mão.
• Privado - não é necessário fazer upload do servidor: o construtor de consultas de contêiner é executado inteiramente em seu navegador. Suas configurações de contêiner, condições de consulta e estilos responsivos nunca saem do seu dispositivo. Toda a geração de CSS é 100% do lado do cliente, sem upload de dados.
• Visualização ao vivo com controles de redimensionamento: veja exatamente como sua consulta de contêiner se comporta com um painel de visualização redimensionável ao vivo. Use os botões de largura predefinida (320px a 1024px) ou o controle deslizante interativo para testar sua consulta em qualquer largura de contêiner. A visualização é atualizada instantaneamente para mostrar se a consulta se aplica.
• Saída CSS pronta para uso: copie a regra @container gerada, a declaração do contêiner ou a string de condição de consulta com um clique. O construtor de consulta de contêiner produz CSS pronto para produção com escape adequado para nomes de contêiner e sintaxe de consulta de mídia formatada corretamente.

• Capacidade de resposta do componente React: os desenvolvedores do React usam o construtor de consultas de contêiner para criar componentes verdadeiramente responsivos que se adaptam ao contêiner pai em vez da janela de visualização. Crie componentes de cartão, barra lateral e painel que reorganizam seu layout com base na largura do contêiner disponível – essencial para bibliotecas de componentes reutilizáveis ​​onde o mesmo componente aparece em contêineres de larguras diferentes.
• Layouts responsivos modernos: Web designers usam o construtor de consultas de contêiner para criar layouts que respondem ao elemento que os contém em vez da janela de visualização. Isso é especialmente poderoso para grades de painéis, áreas de widgets e layouts aninhados onde os elementos aparecem em vários contextos e tamanhos diferentes - as consultas de contêiner se adaptam naturalmente sem duplicação de consultas de mídia.
• Sistemas Adaptativos de Widgets e Painéis: Crie sistemas de widgets e painéis laterais que adaptam seu layout interno conforme o usuário os redimensiona. O construtor de consultas de contêiner ajuda a criar widgets de barra lateral responsivos, painéis de bate-papo e gavetas de configurações que reorganizam o conteúdo - alternando de layouts empilhados para lado a lado com base na largura do contêiner e não na largura da tela.
• Conteúdo do CMS e do construtor de páginas: editores de conteúdo que usam WordPress, Drupal ou construtores de páginas como Elementor podem usar o construtor de consulta de contêiner para criar blocos de conteúdo que respondem à largura de sua coluna. Um layout de duas colunas no desktop se torna uma única coluna no celular - mas o mesmo bloco de conteúdo se adapta de maneira diferente dependendo se está na largura total ou na posição da barra lateral.
• Adaptabilidade dos componentes do sistema de design: os arquitetos do sistema de design usam o construtor de consultas de contêiner para definir variantes responsivas dos componentes do sistema de design - cartões, tabelas, barras de navegação e layouts de formulário que se adaptam com base em seu contêiner pai. As consultas de contêineres eliminam a necessidade de suportes responsivos frágeis e permitem componentes verdadeiramente autônomos.
• Grades de cartões de produtos de comércio eletrônico: os desenvolvedores de comércio eletrônico usam o construtor de consultas de contêiner para criar cartões de produtos que fazem a transição perfeita entre visualizações de grade e lista conforme a largura do contêiner muda. Imagens de produtos, títulos, preços e botões adicionar ao carrinho são reorganizados automaticamente quando o usuário ajusta o número de colunas em uma grade de produtos.

As consultas de contêiner CSS (parte da especificação do módulo de contenção CSS nível 3) permitem que você aplique estilos a um elemento com base no tamanho do elemento que o contém (contêiner), em vez da janela de visualização. Esta é uma mudança fundamental em relação às consultas de mídia, que respondem ao tamanho da janela de visualização. Com consultas de contêiner, um componente pode adaptar seu layout, tipografia e aparência com base na quantidade de espaço que seu contêiner pai fornece, tornando o componente verdadeiramente responsivo a contêineres. Nosso construtor de consultas de contêiner ajuda você a criar essas regras visualmente, sem memorizar a sintaxe exata.

1. Defina o contêiner: defina um container-name e um container-type . O tipo mais comum é inline-size , o que torna o elemento um contêiner de consulta que responde a alterações de largura. Use size se precisar consultar largura e altura. Use normal para contenção sem funcionalidade de consulta.
2. Adicionar condições de consulta: adicione uma ou mais condições usando propriedades como largura, altura, tamanho inline ou proporção de aspecto com prefixos mínimo ou máximo. Várias condições são unidas com e . O construtor de consulta de contêiner oferece suporte a unidades CSS padrão (px, em, rem), bem como unidades de consulta de contêiner (cqw, cqi, cqh).
3. Defina estilos responsivos e visualização: adicione declarações CSS que devem ser aplicadas quando a consulta corresponder. Use as predefinições de estilo (Cartão Compacto, Cartão Expandido, etc.) como pontos de partida ou insira pares de propriedade-valor personalizados. Redimensione a visualização ao vivo para ver exatamente quando as condições da sua consulta foram atendidas.

• Escopo: as consultas de mídia respondem ao tamanho da janela de visualização - a largura da janela do navegador. As consultas de contêiner respondem ao tamanho de um elemento pai específico. Isso torna as consultas de contêiner ideais para componentes reutilizáveis ​​que aparecem em diferentes contextos.
• Reutilização: um componente com consultas de contêiner funciona corretamente, quer apareça em uma barra lateral estreita (300px), em uma área de conteúdo principal (800px) ou em uma seção principal de largura total (1200px). As consultas de mídia exigiriam que o componente conhecesse o contexto da janela de visualização.
• Suporte ao navegador: consultas de contêiner CSS são suportadas no Chrome 105+, Firefox 110+, Safari 16+ e Edge 105+. Eles agora estão estáveis ​​e prontos para produção em todos os navegadores modernos. Use o construtor de consultas de contêiner para gerar estilos de aprimoramento progressivo.
• Desempenho: as consultas de contêiner podem ter melhor desempenho do que as consultas de mídia para capacidade de resposta em nível de componente porque elas abrangem recálculos de estilo para a subárvore do contêiner em vez de para todo o documento.

As consultas de contêiner CSS introduzem novas unidades relativas que são calculadas com base nas dimensões do contêiner: cqw (1% da largura do contêiner), cqi (1% do tamanho inline do contêiner), cqh (1% da altura do contêiner), cqb (1% do tamanho do bloco do contêiner), cqmin (o menor entre cqi e cqb) e cqmax (o maior entre cqi e cqb). Essas unidades são especialmente úteis para tipografia fluida e espaçamento que se adapta ao contêiner e não à janela de visualização. Por exemplo, font-size: clamp(0.875rem, 2cqi, 1.5rem) dimensiona o tamanho da fonte suavemente entre 0,875rem e 1,5rem à medida que o contêiner cresce de aproximadamente 44px para 75px de tamanho inline.