CSS Container Style Queries: Stilbaseret responsivt design til globale applikationer

Traditionelt responsivt design er stærkt afhængigt af media queries, der tilpasser en hjemmesides layout og stilarter baseret på viewportens størrelse. Selvom det er effektivt, kan denne tilgang føre til uoverensstemmelser og vanskeligheder, når man arbejder med komplekse komponenter, der skal tilpasse sig forskellige kontekster inden for den samme viewport. CSS Container Style Queries tilbyder en mere granulær og intuitiv løsning, der lader elementer reagere på den styling, der er anvendt på deres indeholdende element, og tilbyder dermed en ægte komponentbaseret responsiv adfærd.

Hvad er CSS Container Style Queries?

Container Style Queries udvider styrken af container queries ud over simple størrelsesbaserede betingelser. I stedet for at tjekke en containers bredde eller højde, giver de dig mulighed for at tjekke for tilstedeværelsen af specifikke CSS-egenskaber og -værdier, der er anvendt på den container. Dette gør det muligt for komponenter at tilpasse deres styling baseret på containerens kontekst, snarere end blot dens dimensioner.

Tænk på det på denne måde: i stedet for at spørge "Er viewporten bredere end 768px?", kan du spørge "Har denne container den --theme: dark; brugerdefinerede egenskab sat?". Dette åbner op for en helt ny verden af muligheder for at skabe fleksible og genanvendelige komponenter, der problemfrit kan tilpasse sig forskellige temaer, layouts eller branding-variationer på tværs af din hjemmeside eller applikation.

Fordele ved Container Style Queries

• Komponentbaseret responsivitet: Isoler responsivitet inden for individuelle komponenter, hvilket gør dem mere bærbare og genanvendelige.
• Reduceret CSS-kompleksitet: Undgå alt for specifikke media queries, der er målrettet bestemte skærmstørrelser.
• Forbedret vedligeholdelse: Ændringer i en komponents styling vil mindre sandsynligt påvirke andre dele af hjemmesiden.
• Temaer og variationer: Skab nemt forskellige temaer eller variationer for komponenter baseret på deres containers styling. Dette er særligt nyttigt for internationale mærker, der skal anvende forskellige branding-retningslinjer i forskellige regioner.
• Forbedret tilgængelighed: At tilpasse komponentstilarter baseret på containerens kontekst kan forbedre tilgængeligheden ved at give mere passende visuelle signaler til brugere med handicap.
• Dynamisk indholdstilpasning: Komponenter kan justere deres layout og præsentation baseret på den type indhold, de indeholder. Forestil dig et resumé af en nyhedsartikel, der tilpasser sig alt efter, om det indeholder et billede eller ej.

Sådan bruges CSS Container Style Queries

Her er en gennemgang af, hvordan man implementerer container style queries:

1. Opsætning af containeren

Først skal du udpege et element som en container. Det kan du gøre ved hjælp af egenskaben container-type:

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

            

              
                Copy
              
            
          

Værdien inline-size er den mest almindelige og nyttige, da den lader containeren forespørge sin inline (horisontale) størrelse. Du kan også bruge size, som forespørger både inline- og blokstørrelse. At bruge kun size kan have konsekvenser for ydeevnen, hvis man ikke er forsigtig.

Alternativt kan du bruge container-type: style for kun at bruge en container til style queries, og ikke size queries, eller container-type: size style for at bruge begge. For at kontrollere containerens navn, brug container-name: my-container og målret den derefter med @container my-container (...).

2. Definering af Style Queries

Nu kan du bruge @container style() at-reglen til at definere stilarter, der gælder, når en bestemt betingelse er opfyldt:

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

            

              
                Copy
              
            
          

I dette eksempel vil stilarterne inden for @container-reglen kun blive anvendt på .component-elementet, hvis dets indeholdende element har den brugerdefinerede egenskab --theme sat til dark.

3. Anvendelse af stilarter på containeren

Til sidst skal du anvende de CSS-egenskaber, som dine style queries tjekker for, på container-elementet:

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

            

              
                Copy
              
            
          

I dette eksempel vil .component have en mørk baggrund og hvid tekst, fordi dens container har stilen --theme: dark; anvendt direkte i HTML'en (for enkelthedens skyld). Bedste praksis er at anvende stilarter via CSS-klasser. Du kan også bruge JavaScript til dynamisk at ændre stilarterne på containeren, hvilket udløser opdateringer af style query.

Praktiske eksempler for globale applikationer

1. Tema-komponenter

Forestil dig en hjemmeside, der understøtter flere temaer. Du kan bruge container style queries til automatisk at justere komponenters styling baseret på det aktive tema.

            /* 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>Korttitel</h2>
    <p>Kortets indhold.</p>
  </div>
</div>

            

              
                Copy
              
            
          

I dette eksempel vil .card-komponenten automatisk skifte mellem et mørkt og lyst tema baseret på --theme-egenskaben i dens container. Dette er meget fordelagtigt for sider, hvor brugere kan vælge forskellige temaer baseret på deres præferencer.

2. Layoutvariationer

Du kan bruge container style queries til at skabe forskellige layoutvariationer for komponenter baseret på den tilgængelige plads eller sidens overordnede layout. Overvej en komponent til sprogvalg. I hovednavigationen kan det være en kompakt dropdown. I sidefoden kan det være en fuld liste over tilgængelige sprog.

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

.footer {
  --layout: expanded;
}

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

@container style(--layout: expanded) {
  .language-selector {
    /* Stilarter for fuld liste over sprog */
  }
}

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

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

            

              
                Copy
              
            
          

Denne tilgang er værdifuld for hjemmesider, der henvender sig til forskellige brugergrænseflader på tværs af forskellige enheder og platforme. Husk på, at mobil- og desktopsiders strukturer ofte er meget forskellige, og dette kan hjælpe komponenter med at tilpasse sig.

3. Tilpasning til indholdstype

Overvej en nyhedshjemmeside med artikelresuméer. Du kan bruge container style queries til at justere præsentationen af resuméer baseret på, om de indeholder et billede eller ej.

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

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

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

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

            

              
                Copy
              
            
          

Dette muliggør en mere visuelt tiltalende og informativ præsentation af artikelresuméer, hvilket forbedrer brugeroplevelsen. Bemærk, at det ikke er ideelt at sætte egenskaben `--has-image` direkte i HTML. En bedre tilgang ville være at bruge JavaScript til at registrere tilstedeværelsen af et billede og dynamisk tilføje eller fjerne en klasse (f.eks. `.has-image`) til `.article-summary`-elementet, og derefter sætte den brugerdefinerede egenskab `--has-image` inden for CSS-reglen for klassen `.has-image`.

4. Lokaliseret styling

For internationale hjemmesider kan container style queries bruges til at tilpasse stilarter baseret på sprog eller region. For eksempel vil du måske bruge forskellige skriftstørrelser eller afstande for sprog med længere 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 giver mulighed for at skabe mere skræddersyede og brugervenlige oplevelser for forskellige sproggrupper. Overvej, at nogle sprog som arabisk og hebraisk skrives fra højre til venstre, og specifikke stilarter skal anvendes. For japansk og andre østasiatiske sprog kan der være behov for forskellig afstand og skriftstørrelse for at gengive tegn korrekt.

5. Overvejelser om tilgængelighed

Container style queries kan også forbedre tilgængeligheden ved at tilpasse komponentstilarter baseret på brugerpræferencer eller enhedens kapaciteter. For eksempel kan du øge kontrasten på en komponent, hvis brugeren har aktiveret høj kontrast-tilstand i deres operativsystem.

            /* 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 din hjemmeside er brugbar og tilgængelig for alle, uanset deres evner. Bemærk brugen af medieforespørgslen `@media (prefers-contrast: more)` til at registrere høj kontrast-tilstand på operativsystemniveau og derefter sætte den brugerdefinerede egenskab `--high-contrast`. Dette giver dig mulighed for at udløse stilændringer ved hjælp af en style query baseret på brugerens systemindstillinger.

Bedste praksis

• Brug beskrivende navne til brugerdefinerede egenskaber: Vælg navne, der tydeligt angiver formålet med egenskaben (f.eks. --theme i stedet for --t).
• Hold Style Queries enkle: Undgå kompleks logik inden for style queries for at opretholde læsbarhed og ydeevne.
• Start med et solidt fundament: Brug traditionel CSS og media queries til grundlæggende layout og styling. Container style queries skal forbedre, ikke erstatte, din eksisterende CSS.
• Overvej ydeevne: Selvom container style queries generelt er effektive, skal du være opmærksom på antallet af queries, du bruger, og kompleksiteten af de stilarter, de udløser. Overforbrug kan påvirke ydeevnen, især på ældre enheder.
• Test grundigt: Test dine komponenter i forskellige kontekster og browsere for at sikre, at de tilpasser sig korrekt.
• Brug fallbacks: Sørg for fallback-stilarter til browsere, der endnu ikke fuldt ud understøtter container style queries. Feature queries (@supports) kan bruges til betinget at anvende style query-kode.
• Dokumenter dine komponenter: Dokumenter tydeligt den tilsigtede brug af hver komponent og de brugerdefinerede egenskaber, den er afhængig af.
• Overvej kaskaden: Husk, at kaskaden stadig gælder inden for container style queries. Vær opmærksom på specificitet og arv, når du definerer dine stilarter.
• Brug JavaScript sparsomt: Selvom du kan bruge JavaScript til dynamisk at ændre stilarter på containeren, så prøv at minimere brugen af det. Stol så meget som muligt på CSS til stilændringer.

Browserunderstøttelse

Container style queries har fremragende browserunderstøttelse på tværs af moderne browsere, herunder Chrome, Firefox, Safari og Edge. Ældre browsere understøtter dog muligvis ikke denne funktion fuldt ud. Sørg for at bruge feature queries til at levere fallback-stilarter til disse browsere eller brug en polyfill.

Konklusion

CSS Container Style Queries tilbyder en kraftfuld og fleksibel tilgang til responsivt design, der giver dig mulighed for at skabe ægte komponentbaserede og tilpasningsdygtige hjemmesider og applikationer. Ved at udnytte stylingen af container-elementer kan du låse op for et nyt niveau af kontrol og granularitet i dine designs, hvilket resulterer i mere vedligeholdelsesvenlige, skalerbare og brugervenlige oplevelser for et globalt publikum.

Omfavn container style queries for at bygge responsive komponenter, der problemfrit tilpasser sig forskellige temaer, layouts, sprog og tilgængelighedskrav, og skab en ægte global weboplevelse.

Ressourcer

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