Tilbage til Data og komponentkontekst

Kontekstdrevet UI

Size queries og komponentens plads

Lad en komponent reagere på den plads, den faktisk får, frem for på hele viewporten.

Se undervisningsslides

Relevante links

TL;DR

  1. Media queries beskriver typisk side- og viewportkontekst; size queries beskriver komponentens lokale plads.
  2. Containeren etableres på en wrapper, mens queryen styler en efterkommer.
  3. Navngivne containere gør relationen tydelig i komponenter med flere mulige ancestors.

Fra viewport til komponent

En card-komponent kan ligge i både en smal sidebar og et bredt hovedområde ved samme viewportbredde. En media query kan ikke se den forskel, men en container query kan:

.product-slot {
  container: product / inline-size;
}


@container product (inline-size > 32rem) {
  .product-card {
    grid-template-columns: minmax(10rem, 2fr) 3fr;
  }
}

Brug stadig media queries til globale layouts og brugerpræferencer. Size queries er et supplement, når beslutningen tilhører komponenten.

Container og indhold er to elementer

Det element, der etablerer en size container, kan ikke samtidig style sig selv ud fra sin egen query. Queryen finder en qualifying ancestor og rammer en efterkommer. En wrapper som .product-slot gør derfor relationen eksplicit.

Brug normalt inline-size, når det kun er den vandrette plads, der er relevant. container-type: size indfører også block-size containment og kræver derfor en mere bevidst højde.

Uden et navn bruges den nærmeste qualifying ancestor. Det kan være fint i små komponenter, men navne gør dybt nestede layouts lettere at læse:

.sidebar {
  container: sidebar / inline-size;
}


.product-slot {
  container: product / inline-size;
}

Navnet beskriver, hvilken kontrakt queryen afhænger af, og reducerer risikoen for, at en ny wrapper senere ændrer resultatet.

Test komponenten – ikke kun siden

Test samme markup i flere containere, med lange overskrifter og ved mellemstørrelser. En god size-query-komponent bør ikke kræve en ny modifier- klasse, bare fordi den flyttes til en anden del af siden.

Se mere