CSS media queries en container queries uitgelegd

Websites worden bekeken op telefoons, tablets, laptops en brede monitoren, en soms gewoon geprint. Om je ontwerp op al die schermen goed te laten werken, gebruik je media queries. Die pagina werd jarenlang veel bezocht, en ik kreeg vaak de vraag om het wat dieper uit te leggen. Inmiddels is er ook een nieuw broertje bij: de container query. Tijd voor een update.

Wat is een media query?

Een media query is een voorwaarde voor je CSS: de regels binnen de query gelden alleen als het apparaat aan de voorwaarde voldoet. Bijvoorbeeld alleen als het scherm minstens 700 pixels breed is.

@media (min-width: 700px) {
  .zijbalk { display: block; }
}

Je kunt een media query op drie manieren gebruiken: in het media-attribuut van een stylesheet-link, in een @import, of, het meest gebruikelijk, als @media-regel in je stylesheet.

<link rel="stylesheet" href="klein.css" media="(max-width: 480px)">

@import url("klein.css") (max-width: 480px);

@media (max-width: 480px) { /* regels */ }

Logische operatoren

• and combineert voorwaarden: @media (min-width: 700px) and (orientation: landscape)
• komma werkt als “of”: @media (min-width: 700px), print
• not keert de hele query om: @media not print

Moderne browsers ondersteunen ook een leesbaardere notatie met vergelijkingstekens:

@media (width >= 700px) { ... }
@media (400px <= width < 700px) { ... }

Handige media-kenmerken

• width en height: de afmetingen van het venster
• orientation: staand of liggend
• prefers-color-scheme: licht of donker thema van het besturingssysteem
• prefers-reduced-motion: de bezoeker wil zo min mogelijk animaties, belangrijk voor toegankelijkheid
• hover en pointer: muis of touchscreen
• resolution: schermen met een hoge pixeldichtheid
• print: aparte opmaak voor als iemand de pagina afdrukt

Mediatypes als handheld en tv, die je in oudere artikelen nog tegenkomt, worden niet meer gebruikt. Hetzelfde geldt voor de toevoeging only screen and: die waren alleen nodig voor heel oude browsers.

Mobile first

Begin met de opmaak voor het kleinste scherm en voeg met min-width-queries opmaak toe naarmate er meer ruimte is. Zo blijft je CSS overzichtelijk en laden telefoons niet onnodig veel.

Container queries

Een media query kijkt naar het scherm, maar vaak wil je eigenlijk weten hoeveel ruimte een onderdeel zelf krijgt. Een kaartje kan in een smalle zijbalk staan of in een brede hoofdkolom, op hetzelfde scherm. Daarvoor zijn container queries, die sinds 2023 in alle moderne browsers werken.

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

@container (min-width: 400px) {
  .kaart { display: flex; gap: 1rem; }
}

Het element met container-type wordt de container. De regels in @container gelden zodra die container breed genoeg is, ongeacht hoe breed het scherm is.

Wanneer gebruik je wat?

• Media queries voor de opbouw van de hele pagina, zoals het aantal kolommen of het menu, en voor voorkeuren van de bezoeker, zoals donkere modus en minder animaties.
• Container queries voor losse onderdelen die op verschillende plekken terechtkomen, zoals kaartjes, widgets en blokken in een CMS.

Samen geven ze je alles wat je nodig hebt voor een ontwerp dat zich overal aanpast.