Container Query
CSS Container Query
A conditional rule applying styles based on the size of a parent container rather than the viewport.
Detalhe técnico
CSS Container Querys require a containment context declared with container-type: inline-size on the parent element. The @container rule then queries the container's dimensions rather than the viewport. Container query units (cqw, cqh, cqi, cqb) resolve relative to the query container. This enables truly reusable components that adapt to their available space regardless of viewport size — solving the long-standing limitation of media queries in component-based architectures.
Exemplo
```css
.card-wrapper {
container-type: inline-size;
container-name: card;
}
@container card (min-width: 400px) {
.card { flex-direction: row; }
.card-image { width: 40%; }
}
```
Ferramentas relacionadas
C
CSS Minifier
C
CSS Beautifier
C
CSS Gradient Generator
C
CSS Box Shadow Generator
C
CSS Flexbox Generator
C
CSS Grid Generator
C
CSS Animation Generator
C
CSS Border Radius Generator
C
CSS Text Shadow Generator
C
CSS Transform Generator
A
Analisador de Sentimento de Publicação
G
Gerador de Emojis para Redes Sociais
G
Gerador de Biografias para Redes Sociais
G
Gerador de Lorem Ipsum
G
Gerador de Perfis de Usuário