Van Viewport naar Container: Een Paradigmaverschuiving
Jarenlang was responsive webdesign synoniem met media queries: stijlen die reageren op de breedte van het viewport (het browservenster). Dit werkt prima voor paginalay-outs, maar schiet tekort voor herbruikbare componenten. Stel dat een kaartje in een brede sidebar er anders moet uitzien dan hetzelfde kaartje in een smalle zijkolom — met media queries was dit omslachtig of zelfs onmogelijk. Container queries lossen dit elegante op.
Wat Zijn Container Queries?
Container queries laten je toe stijlen toe te passen op basis van de grootte van de bovenliggende container, in plaats van het viewport. Een component kan zichzelf aanpassen aan de ruimte die het krijgt, ongeacht hoe groot het scherm is.
Hoe Gebruik Je Ze?
Stap 1: Definieer een containment-context op de bovenliggende element:
.card-wrapper {
container-type: inline-size;
container-name: card;
}Stap 2: Gebruik @container om stijlen te definiëren op basis van de containergrootte:
@container card (min-width: 400px) {
.card {
display: flex;
flex-direction: row;
}
}
@container card (max-width: 399px) {
.card {
display: block;
}
}Browserondersteuning in 2025
Container queries zijn inmiddels breed ondersteund in alle moderne browsers:
- Chrome/Edge: Ondersteund vanaf versie 105
- Firefox: Ondersteund vanaf versie 110
- Safari: Ondersteund vanaf versie 16
De wereldwijde browserondersteuning ligt boven de 90%, wat container queries geschikt maakt voor productiegebruik in de meeste projecten.
Verschil Tussen Media Queries en Container Queries
| Eigenschap | Media Queries | Container Queries |
|---|---|---|
| Reageert op | Viewport-breedte | Containergrootte |
| Ideaal voor | Paginalay-out | Herbruikbare componenten |
| Context-bewustheid | Globaal | Lokaal (per component) |
| Herbruikbaarheid | Beperkt | Hoog |
Praktijkvoorbeeld: Een Responsive Productkaart
Stel je hebt een productkaart die op een volledig brede sectie horizontaal wordt weergegeven, maar in een smalle zijbalk verticaal gestapeld moet zijn. Met container queries hoef je geen aparte klassen of media queries toe te voegen — de kaart past zichzelf automatisch aan op basis van de beschikbare ruimte:
.product-grid {
container-type: inline-size;
}
.product-card {
/* Standaard: verticaal gestapeld */
display: block;
}
@container (min-width: 500px) {
.product-card {
/* Breed genoeg: horizontaal naast elkaar */
display: grid;
grid-template-columns: 200px 1fr;
gap: 1rem;
}
}Container Queries en Design Systems
Container queries zijn bijzonder waardevol in design systems en componentenbibliotheken. Componenten kunnen volledig autonoom zijn — ze weten zelf hoe ze eruitzien op elke grootte, ongeacht de omringende context. Dit maakt componenten echte "plug-and-play" bouwstenen.
Wat Staat Er Nog Aan Te Komen?
Naast de huidige inline-size container queries wordt ook gewerkt aan style queries (reageren op CSS custom properties van de container) en state queries. De CSS Working Group blijft actief nieuwe specificaties ontwikkelen die het responsief werken nog flexibeler zullen maken.
Conclusie
CSS container queries markeren een echte verschuiving in hoe we responsive design benaderen. In plaats van te denken vanuit het scherm, denken we nu vanuit de component. Met brede browserondersteuning en een intuïtieve syntax is er geen reden meer om ze nog niet te gebruiken. Begin vandaag nog met experimenteren!