Tilbage til Responsive detaljer

Kontekstdrevet UI

Betingede og flydende responsive detaljer

Brug containerkontekst og progress() til detaljer, der ellers ofte ender som ekstra breakpoints.

Se undervisningsslides

Relevante links

TL;DR

  1. Små visuelle valg kan også afhænge af kontekst – fx om en hero er full bleed eller ligger inde i en page-wrapper.
  2. progress() returnerer et tal mellem 0 og 1 for en værdis position mellem et start- og slutpunkt.
  3. Nye features fungerer bedst som forbedringer oven på en robust grundvisning.

Conditional border radius

En hero med luft langs siderne kan have afrundede hjørner. Når den fylder hele viewporten, kan samme radius se ud som et utilsigtet indhak.

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


.hero {
  border-radius: 2rem;


  @container hero-wrapper (inline-size = 100vw) {
    border-radius: 0;
  }
}

Pointen er ikke kun border radius. Mønsteret viser, at en lille designbeslutning kan høre til komponentens konkrete layoutkontekst i stedet for et globalt “mobile/desktop”-breakpoint.

Flydende værdier med progress()

progress() normaliserer en værdi til intervallet 0–1:

progress(5, 0, 10) /* 0.5 */

Det normaliserede tal kan bruges i en anden beregning:

.hero h1 {
  --fluid-progress: progress(100cqi, 20rem, 70rem);
  font-size: calc(2rem + (4rem * var(--fluid-progress)));
}

Ved og under startværdien er resultatet 0; ved og over slutværdien er det 1. Imellem dem får du en lineær progression, som kan genbruges til flere koordinerede properties.

clamp() er fortsat et godt og bredt understøttet valg til en enkelt flydende værdi. progress() bliver især interessant, når du vil navngive progressionen og bruge den til fx både typografi, spacing og billedstørrelse.

Se mere