M

MLOG

Dansk

Udforsk CSS Container Style Queries, en kraftfuld tilgang til responsivt design, der lader komponenter tilpasse sig baseret på deres containers styling, ikke kun viewport-størrelse. Lær praktiske anvendelser til forskellige globale websites.

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

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

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

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>

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>

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

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>

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>

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

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

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

CSS Container Style Queries: Stilbaseret responsivt design til globale applikationer | MLOG