Consultas de contêiner CSS: Revolucioning Design Responsivo

Este trecho de liberando o poder do CSS explora o potencial transformador das consultas de contêiner na criação de componentes da web adaptáveis ​​e resilientes. Diferentemente das consultas de mídia do ViewPort que reagem ao tamanho da janela do navegador inteiro, as consultas de contêiner permitem o estilo com base no espaço disponível de um elemento , permitindo a resposta verdadeiramente no nível do componente.

...

O design responsivo baseado em viewport depende de pontos de interrupção vinculados a tamanhos de dispositivo simplificados (móveis, tablets, desktop), geralmente associados a uma grade de layout. Essa abordagem luta com a adaptabilidade individual de componentes; Elementos maiores podem se ajustar separadamente, mas geralmente seguem os pontos de interrupção globais. As consultas de contêiner oferecem uma solução superior. A imagem a seguir demonstra um componente de cartão estilizado com consultas de contêiner, completamente independente do tamanho da viewport. A aparência do cartão se adapta dinamicamente ao seu espaço disponível.

Nota: O suporte amplo do navegador para consultas de contêiner existe, já que o Firefox 110. Os polyfills estão disponíveis para navegadores mais antigos.

Definindo consultas de contêineres

Para utilizar consultas de contêiner, declare primeiro um elemento como um contêiner usando o contêiner-type propriedade.

inline-size

(equivalente à largura nos modos de escrita horizontal) é o valor mais comum e amplamente suportado: . Container { Tipo de contêiner: tamanho embutido; }

.container {
  container-type: inline-size;
}

h2

color para azul quando seu contêiner é 40CH de largura ou maior: @container (min-lar: 40ch) { H2 { Cor: azul; } }

@container (min-width: 40ch) {
  h2 {
    color: blue;
  }
}

@container (em linha em linha> 40ch) { H2 { Cor: azul; } }

@container (inline-size > 40ch) {
  h2 {
    color: blue;
  }
}

block-size

e aspecto-ratio . Consulte a especificação oficial para obter mais detalhes. Atualizando um componente de cartão: um exemplo prático

Sem consultas de contêiner, as variações de cartões normalmente envolveriam classes modificadores vinculados aos pontos de interrupção da viewport. A imagem abaixo mostra três tamanhos de cartão e suas classes correspondentes.

[Codepen Demo: Viewport Media Query Cards] (link para codepen)

usando consultas de contêiner, mantemos um estilo de cartão padrão (para navegadores não suportados) e definimos estilos adicionais com base na largura do contêiner:

350px ou maior: layout horizontal

600px ou maior: imagem como fundo

[DEMO CODEPEN: consultas de contêineres para cartões] (link para codepen)

Este trecho é de

liberando o poder do CSS: Técnicas avançadas para interfaces de usuário responsivas

, disponível no SitePoint Premium.

key takeaways:

consultas de contêiner oferecem capacidade de resposta no nível do componente.

eles são definidos usando

container-type
• e
@container
• . Propriedades lógicas Aprimore a compatibilidade do modo de escrita cruzada. eles fornecem uma abordagem mais flexível e granular ao design responsivo do que as consultas de mídia de viewport.
(Nota: substitua "link para codepen" com links codepen reais, se disponível.)