CSS Container Queries: Eindelijk Echte Component-Based Responsive Design

Na 15 jaar van responsive design met media queries, zijn container queries eindelijk mainstream geworden. Als iemand die dagelijks werkt aan complexe web interfaces voor Defactor, kan ik niet genoeg benadrukken hoe revolutionair dit is.

Het Media Query Probleem

Media queries zijn geweldig, maar ze hebben een fundamenteel probleem: ze reageren op de viewport, niet op de container waarin een component leeft.

/* De oude manier - reageert op viewport */
@media (max-width: 768px) {
  .card {
    flex-direction: column;
  }
}

Dit werkt prima voor pagina-niveau layouts, maar breekt zodra je herbruikbare componenten wilt maken die in verschillende contexten worden gebruikt.

Container Queries in Actie

Met container queries kunnen componenten reageren op hun eigen beschikbare ruimte:

/* De nieuwe manier - reageert op container */
.card-container {
  container-type: inline-size;
}

@container (max-width: 400px) {
  .card {
    flex-direction: column;
  }
}

Real-World Voorbeeld: Defactor’s Claim Widgets

Bij Defactor hebben we widgets die politieke claims tonen. Deze widgets moeten werken in:

• De hoofdpagina (breed)
• Sidebar (smal)
• Embedded op externe sites (variabel)
• Mobile apps (responsive)

Voor Container Queries

Voorheen hadden we verschillende versies van hetzelfde component:

.claim-widget-large { /* Voor hoofdpagina */ }
.claim-widget-medium { /* Voor sidebar */ }
.claim-widget-small { /* Voor mobile */ }

Dit leidde tot:

• Code duplicatie
• Inconsistente styling
• Moeilijk onderhoud
• Fragiele layouts

Met Container Queries

Nu hebben we één component die zich aanpast:

.claim-widget {
  container-type: inline-size;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem;
}

/* Basis layout - compact */
.claim-text {
  font-size: 0.9rem;
}

.politician-avatar {
  width: 32px;
  height: 32px;
}

/* Medium containers */
@container (min-width: 300px) {
  .claim-text {
    font-size: 1rem;
  }
  
  .politician-avatar {
    width: 40px;
    height: 40px;
  }
  
  .claim-meta {
    display: flex;
    justify-content: space-between;
  }
}

/* Large containers */
@container (min-width: 500px) {
  .claim-widget {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 1rem;
    align-items: center;
  }
  
  .politician-avatar {
    width: 60px;
    height: 60px;
  }
  
  .rating-badge {
    margin-left: auto;
  }
}

Browser Support en Fallbacks

Container queries worden ondersteund in alle moderne browsers, maar voor legacy support gebruik ik:

/* Fallback voor oude browsers */
.claim-widget {
  /* Basis mobile-first styling */
}

/* Container query met feature detection */
@supports (container-type: inline-size) {
  .claim-widget {
    container-type: inline-size;
  }
  
  @container (min-width: 300px) {
    /* Enhanced styling */
  }
}

Performance Overwegingen

Container queries zijn verbazingwekkend performant. De browser hoeft alleen de container te meten, niet de hele viewport te herberekenen.

In Defactor’s dashboard zie ik:

• 40% minder layout thrashing
• Soepelere animations tijdens resize
• Consistentere frame rates

Praktische Tips

1. Start Klein

Begin met simpele width-based queries voordat je overstapt naar complexere logica.

2. Combineer met CSS Grid

Container queries en CSS Grid zijn een perfecte match:

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

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

3. Gebruik Logische Eigenschappen

Combineer container queries met logical properties voor betere internationalisatie:

@container (min-width: 400px) {
  .content {
    padding-inline: 2rem;
    margin-block-start: 1rem;
  }
}

De Toekomst is Nu

Container queries zijn niet meer “de toekomst” - ze zijn beschikbaar en production-ready. Voor elke frontend developer die werkt aan component-gebaseerde systemen (en wie doet dat niet?), zijn ze een game-changer.

Bij Defactor hebben ze onze development workflow getransformeerd. We denken nu in termen van intrinsieke component design in plaats van viewport-gebaseerde layouts.

Ga Aan de Slag

Mijn advies: begin vandaag nog met container queries in je volgende project. Start klein, experimenteer, en ervaar zelf hoe ze responsive design fundamenteel veranderen.

Wil je meer weten over moderne CSS technieken? Ik deel regelmatig tips en tricks op Twitter en geef workshops over frontend development.