M

MLOG

Norsk

Utforsk CSS Container Style Queries, en kraftig tilnærming til responsivt design som lar komponenter tilpasse seg basert på containerens stil, ikke bare visningsportens størrelse. Lær praktiske anvendelser for ulike globale nettsteder.

CSS Container Style Queries: Stilbasert responsivt design for globale applikasjoner

Tradisjonelt responsivt design er sterkt avhengig av media queries, som tilpasser et nettsteds layout og stiler basert på størrelsen på visningsporten. Selv om dette er effektivt, kan denne tilnærmingen føre til inkonsistenser og vanskeligheter når man jobber med komplekse komponenter som må tilpasse seg forskjellige kontekster innenfor samme visningsport. CSS Container Style Queries tilbyr en mer detaljert og intuitiv løsning, som lar elementer respondere på stilen som er brukt på deres inneholdende element, og tilbyr dermed ekte komponentbasert responsiv atferd.

Hva er CSS Container Style Queries?

Container Style Queries utvider kraften til container queries utover enkle størrelsesbaserte betingelser. I stedet for å sjekke bredden eller høyden på en container, lar de deg sjekke for tilstedeværelsen av spesifikke CSS-egenskaper og -verdier som er brukt på den containeren. Dette gjør det mulig for komponenter å tilpasse sin stil basert på containerens kontekst, i stedet for bare dens dimensjoner.

Tenk på det på denne måten: i stedet for å spørre "Er visningsporten bredere enn 768px?", kan du spørre "Har denne containeren custom property-en --theme: dark; satt?". Dette åpner en helt ny verden av muligheter for å skape fleksible og gjenbrukbare komponenter som sømløst kan tilpasse seg forskjellige temaer, layouter eller merkevarevariasjoner på tvers av nettstedet eller applikasjonen din.

Fordeler med Container Style Queries

Slik bruker du CSS Container Style Queries

Her er en oversikt over hvordan du implementerer container style queries:

1. Sette opp containeren

Først må du utpeke et element som en container. Du kan gjøre dette ved å bruke container-type-egenskapen:

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

Verdien inline-size er den vanligste og mest nyttige, da den lar containeren spørre sin inline (horisontale) størrelse. Du kan også bruke size som spør både inline- og blokk-størrelse. Å bare bruke size kan ha ytelsesimplikasjoner hvis du ikke er forsiktig.

Alternativt kan du bruke container-type: style for å bruke en container kun for stil-queries, og ikke størrelses-queries, eller container-type: size style for å bruke begge. For å kontrollere navnet på containeren, bruk container-name: my-container og målrett den deretter med @container my-container (...).

2. Definere stil-queries

Nå kan du bruke @container style() at-regelen for å definere stiler som gjelder når en spesifikk betingelse er oppfylt:

@container style(--theme: dark) {
  .component {
    background-color: #333;
    color: #fff;
  }
}

I dette eksempelet vil stilene innenfor @container-regelen kun bli brukt på .component-elementet hvis dets inneholdende element har custom property-en --theme satt til dark.

3. Anvende stiler på containeren

Til slutt må du anvende CSS-egenskapene som dine stil-queries sjekker for på container-elementet:

<div class="container" style="--theme: dark;">
  <div class="component">Dette er en komponent.</div>
</div>

I dette eksempelet vil .component ha en mørk bakgrunn og hvit tekst fordi dens container har --theme: dark;-stilen brukt direkte i HTML (for enkelhets skyld). Beste praksis er å anvende stiler via CSS-klasser. Du kan også bruke JavaScript for å dynamisk endre stilene på containeren, noe som utløser oppdateringer av stil-queries.

Praktiske eksempler for globale applikasjoner

1. Komponenter med tema

Se for deg et nettsted som støtter flere temaer. Du kan bruke container style queries for å automatisk justere stilen på komponenter basert på det aktive temaet.

/* CSS */
.app-container {
  --theme: light;
}

@container style(--theme: dark) {
  .card {
    background-color: #333;
    color: #fff;
  }
}

@container style(--theme: light) {
  .card {
    background-color: #f0f0f0;
    color: #333;
  }
}

/* HTML */
<div class="app-container" style="--theme: dark;">
  <div class="card">
    <h2>Korttittel</h2>
    <p>Kortinnhold.</p>
  </div>
</div>

I dette eksempelet vil .card-komponenten automatisk bytte mellom et mørkt og lyst tema basert på --theme-egenskapen til dens container. Dette er veldig gunstig for nettsteder der brukere kan velge forskjellige temaer basert på sine preferanser.

2. Layout-variasjoner

Du kan bruke container style queries for å lage forskjellige layout-variasjoner for komponenter basert på tilgjengelig plass eller den generelle layouten på siden. Tenk på en språkvelgerkomponent. I hovednavigasjonen kan den være en kompakt nedtrekksmeny. I bunnteksten kan den være en full liste over tilgjengelige språk.

/* CSS */
.navigation {
  --layout: compact;
}

.footer {
  --layout: expanded;
}

@container style(--layout: compact) {
  .language-selector {
    /* Stiler for kompakt nedtrekksmeny */
  }
}

@container style(--layout: expanded) {
  .language-selector {
    /* Stiler for full liste med språk */
  }
}

/* HTML */
<nav class="navigation" style="--layout: compact;">
  <div class="language-selector">...

<footer class="footer" style="--layout: expanded;">
  <div class="language-selector">...

Denne tilnærmingen er verdifull for nettsteder som henvender seg til ulike brukergrensesnitt på tvers av forskjellige enheter og plattformer. Tenk på at strukturen på mobil- og desktop-nettsteder ofte er svært forskjellig, og dette kan hjelpe komponenter med å tilpasse seg.

3. Tilpasning til innholdstype

Tenk på et nyhetsnettsted med artikkelsammendrag. Du kan bruke container style queries for å justere presentasjonen av sammendrag basert på om de inneholder et bilde eller ikke.

/* CSS */
.article-summary {
  --has-image: false;
}

@container style(--has-image: true) {
  .article-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

/* HTML (med bilde) */
<div class="article-summary" style="--has-image: true;">
  <img src="..." alt="..." />
  <div>...
</div>

/* HTML (uten bilde) */
<div class="article-summary" style="--has-image: false;">
  <div>...
</div>

Dette muliggjør en mer visuelt tiltalende og informativ presentasjon av artikkelsammendrag, noe som forbedrer brukeropplevelsen. Merk at å sette --has-image-egenskapen direkte i HTML ikke er ideelt. En bedre tilnærming ville være å bruke JavaScript for å oppdage tilstedeværelsen av et bilde og dynamisk legge til eller fjerne en klasse (f.eks. .has-image) på .article-summary-elementet, og deretter sette --has-image custom property-en i CSS-regelen for .has-image-klassen.

4. Lokalisert styling

For internasjonale nettsteder kan container style queries brukes til å tilpasse stiler basert på språk eller region. For eksempel kan du ønske å bruke forskjellige skriftstørrelser eller avstand for språk med lengre tekst.

/* CSS */
.locale-container {
  --language: en;
}

@container style(--language: ja) {
  .text {
    font-size: 1.1em;
    letter-spacing: 0.05em;
  }
}

@container style(--language: ar) {
  .text {
    direction: rtl;
  }
}

/* HTML */
<div class="locale-container" style="--language: ja;">
  <p class="text">...</p>
</div>

Dette gjør det mulig å skape mer skreddersydde og brukervennlige opplevelser for ulike språkgrupper. Tenk på at noen språk som arabisk og hebraisk skrives fra høyre til venstre, og spesifikke stiler må brukes. For japansk og andre østasiatiske språk kan det være nødvendig med annen avstand og skriftstørrelse for å gjengi tegnene riktig.

5. Tilgjengelighetshensyn

Container style queries kan også forbedre tilgjengeligheten ved å tilpasse komponentstiler basert på brukerpreferanser eller enhetens evner. For eksempel kan du øke kontrasten til en komponent hvis brukeren har aktivert høy kontrast-modus i operativsystemet sitt.

/* CSS */
body {
  --high-contrast: false;
}

@media (prefers-contrast: more) {
  body {
    --high-contrast: true;
  }
}

@container style(--high-contrast: true) {
  .component {
    background-color: black;
    color: white;
  }
}

/* HTML */
<div class="component">...

Dette sikrer at nettstedet ditt er brukbart og tilgjengelig for alle, uavhengig av deres evner. Legg merke til bruken av media query-en @media (prefers-contrast: more) for å oppdage høy kontrast-modus på operativsystemnivå, og deretter sette --high-contrast custom property-en. Dette lar deg utløse stilendringer ved hjelp av en stil-query basert på brukerens systeminnstillinger.

Beste praksis

Nettleserstøtte

Container style queries har utmerket nettleserstøtte i moderne nettlesere, inkludert Chrome, Firefox, Safari og Edge. Eldre nettlesere støtter imidlertid kanskje ikke denne funksjonen fullt ut. Sørg for å bruke funksjons-queries for å tilby fallback-stiler for disse nettleserne eller bruk en polyfill.

Konklusjon

CSS Container Style Queries tilbyr en kraftig og fleksibel tilnærming til responsivt design, og lar deg skape ekte komponentbaserte og tilpasningsdyktige nettsteder og applikasjoner. Ved å utnytte stilen til container-elementer kan du låse opp et nytt nivå av kontroll og detaljrikdom i designene dine, noe som resulterer i mer vedlikeholdbare, skalerbare og brukervennlige opplevelser for et globalt publikum.

Omfavn container style queries for å bygge responsive komponenter som sømløst tilpasser seg ulike temaer, layouter, språk og tilgjengelighetskrav, og skap en ekte global nettopplevelse.

Ressurser