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

• Komponentbasert responsivitet: Isoler responsivitet innenfor individuelle komponenter, noe som gjør dem mer portable og gjenbrukbare.
• Redusert CSS-kompleksitet: Unngå altfor spesifikke media queries som er rettet mot bestemte skjermstørrelser.
• Forbedret vedlikehold: Endringer i en komponents stil vil med mindre sannsynlighet påvirke andre deler av nettstedet.
• Temaer og variasjoner: Lag enkelt forskjellige temaer eller variasjoner for komponenter basert på containerens stil. Dette er spesielt nyttig for internasjonale merkevarer som trenger å bruke forskjellige retningslinjer for merkevarebygging i ulike regioner.
• Forbedret tilgjengelighet: Tilpasning av komponentstiler basert på containerens kontekst kan forbedre tilgjengeligheten ved å gi mer passende visuelle hint for brukere med nedsatt funksjonsevne.
• Dynamisk innholdstilpasning: Komponenter kan justere layout og presentasjon basert på typen innhold de har. Tenk deg et sammendrag av en nyhetsartikkel som tilpasser seg basert på om den inneholder et bilde eller ikke.

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;
}

            

              
                Copy
              
            
          

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;
  }
}

            

              
                Copy
              
            
          

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>

            

              
                Copy
              
            
          

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>

            

              
                Copy
              
            
          

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">...

            

              
                Copy
              
            
          

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>

            

              
                Copy
              
            
          

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>

            

              
                Copy
              
            
          

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">...

            

              
                Copy
              
            
          

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

• Bruk beskrivende navn på custom properties: Velg navn som tydelig indikerer formålet med egenskapen (f.eks. --theme i stedet for --t).
• Hold stil-queries enkle: Unngå kompleks logikk i stil-queries for å opprettholde lesbarhet og ytelse.
• Start med et solid grunnlag: Bruk tradisjonell CSS og media queries for grunnleggende layout og styling. Container style queries skal forbedre, ikke erstatte, din eksisterende CSS.
• Vurder ytelse: Selv om container style queries generelt er effektive, vær oppmerksom på antall queries du bruker og kompleksiteten til stilene de utløser. Overdreven bruk kan påvirke ytelsen, spesielt på eldre enheter.
• Test grundig: Test komponentene dine i ulike kontekster og nettlesere for å sikre at de tilpasser seg riktig.
• Bruk fallbacks: Sørg for fallback-stiler for nettlesere som ennå ikke fullt ut støtter container style queries. Funksjons-queries (@supports) kan brukes til å betinget anvende kode for stil-queries.
• Dokumenter komponentene dine: Dokumenter tydelig den tiltenkte bruken av hver komponent og de custom properties den er avhengig av.
• Vurder kaskaden: Husk at kaskaden fortsatt gjelder innenfor container style queries. Vær bevisst på spesifisitet og arv når du definerer stilene dine.
• Bruk JavaScript sparsomt: Selv om du kan bruke JavaScript til å dynamisk endre stiler på containeren, prøv å minimere bruken av det. Stol på CSS så mye som mulig for stilendringer.

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

• MDN Web Docs: CSS Container Queries
• CSS Container Style Queries – et første blikk
• Container Style Queries Polyfills