Container Queries i praksis

Hvorfor container queries

Media queries ser kun på viewporten. Container queries ser på komponentens egen bredde, og det er ofte mere præcist i komponentbaserede layouts.

Det betyder fx, at samme card kan opføre sig forskelligt i en smal sidebar og i et bredt content-område, uden ekstra utility-klasser.

Media vs container

Kort fortalt:

• @media = “hvor stor er browseren?”
• @container = “hvor meget plads har den her komponent?”

/* viewport-baseret */
@media (width > 900px) {
  .card {
    flex-direction: row;
  }
}

/* komponent-baseret */
@container card (width > 400px) {
  .card {
    flex-direction: row;
  }
}

Containment og syntax

Før du kan query’e en container, skal den deklareres med container-type / container. Men vær her opmærksom på, at du ikke kan forespørge størrelsen (inline eller size) på det element, der definerer containeren. Det skal være et child-element.

.card-wrapper {
  container-type: inline-size;
}

@container (width > 640px) {
  .card {
    grid-template-columns: 2fr 3fr;
  }
}

Her reagerer .card på bredden af .card-wrapper, som sandsynligvis er ligeså bred som .card i dette layout. Hvis du prøvede både at deklarere container-type: inline-size og forespørge @container (width > 400px) på .card, ville det ikke virke, fordi du ikke kan spørge på containerens egen størrelse.

Navngivne containere

Navngivne containere er ekstra nyttige, når flere wrappers har container-type, og du vil være helt tydelig om, hvilken kontekst en regel refererer til.

main {
  container: main / inline-size;
}

.card-wrapper {
  container: card / inline-size;
}

@container card (width > 640px) {
  .card {
    grid-template-columns: 2fr 3fr;
  }
}
@container main (width > 900px) {
  .card {
    flex-direction: row;
  }
}

Container query units

Units som cqw, cqh, cqmin og cqmax giver skalerbare værdier direkte ud fra containeren:

h2 {
  font-size: clamp(1.25rem, 5cqw, 2.5rem);
}

Det er en enkel måde at få komponent-intern fluid typografi uden ekstra breakpoints.

Øvelser

Øvelse 1

• Tilføj <div class="card-wrapper"> rundt om <div class="card"> i HTML.
• Tilføj container-type: inline-size; til .card-wrapper i CSS.
• Omskriv CSS’en, så kortet først får et to-kolonne grid, når .card-wrapper er bredere end 300px.

Øvelse 2

• Tilføj container: main / inline-size; til main i CSS.
• Tilføj navnet card til din nuværende @container.
• Tilføj en ny container query, som lytter til main’s container-bredde. Når den er mindre end 250px, så skal <img> have display: none;.

Øvelse 3

Brug container query units til at gøre font-størrelsen på card-heading responsiv i forhold til størrelsen på card’et.

Øvrige ressourcer

• https://ishadeed.com/article/css-container-query-guide/