Wat is een mobile-first responsive strategie, en hoe passen container queries daarin?

Question

Accepted Answer

**Mobile-first** betekent dat je je basisstijlen schrijft voor het **kleinste scherm**, en vervolgens complexiteit toevoegt voor grotere schermen met `min-width` mediaquery's — in plaats van met desktop te beginnen en dingen weg te strepen.

## Mobile-first in de praktijk

```css
/* base: mobile — single column, simple */
.layout { display: grid; gap: 1rem; }

/* enhance for tablet and up */
@media (min-width: 768px) {
  .layout { grid-template-columns: 1fr 2fr; }
}
/* enhance further for desktop */
@media (min-width: 1200px) {
  .layout { grid-template-columns: 1fr 2fr 1fr; }
}
```

**Waarom mobile-first wint:** basis CSS blijft minimaal (mobiel krijgt alleen wat het nodig heeft — goed voor prestaties op zwakkere apparaten), en je **voegt complexiteit toe**, wat gemakkelijker is om over na te denken dan het overschrijven of verwijderen. Het komt ook overeen met hoe inhoud natuurlijk van één kolom naar veel kolommen reflowt.

## De beperking van mediaquery's

Mediaquery's reageren op de **viewport** — het hele venster. Maar een herbruikbaar onderdeel (bijvoorbeeld een kaart) kan in een breed hoofdgebied *of* in een smal zijpaneel op dezelfde pagina voorkomen. De breedte van de viewport kan je niet vertellen hoeveel ruimte het *onderdeel* werkelijk heeft.

## Container queries lossen dit op

```css
.card-wrapper {
  container-type: inline-size;  /* declare it a query container */
}

/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
  .card { display: grid; grid-template-columns: auto 1fr; }
}
```

Nu schakelt dezelfde kaart automatisch naar een horizontale indeling wanneer *zijn container* ≥400px is — of dat nu omdat het scherm groot is of omdat het in een brede kolom staat. Het onderdeel wordt werkelijk **contextafhankelijk en herbruikbaar**.

## Ze vullen elkaar aan

- **Mediaquery's** — paginaniveau-indeling, globale breekpunten, gebruikersvoorkeuren (donker modus, verminderde beweging).
- **Container queries** — responsiviteit op onderdeelniveau voor herbruikbare onderdelen.

## Waarom het belangrijk is

Mobile-first houdt responsive CSS schoon en onderhoudbaar.

Container queries zijn een grote vooruitgang: ze stellen onderdelen in staat om te reageren op hun *eigen* beschikbare ruimte, wat precies is wat je nodig hebt in een op onderdelen gebaseerde architectuur (designsystemen, herbruikbare kaarten/widgets) waar hetzelfde onderdeel in veel contexten terechtkomt.