CSS Container Style Queries: Stilbaserad responsiv design för globala applikationer

Traditionell responsiv design förlitar sig mycket på mediafrågor (media queries), och anpassar en webbplats layout och stilar baserat på visningsytans storlek. Även om detta är effektivt kan det leda till inkonsekvenser och svårigheter när man hanterar komplexa komponenter som behöver anpassas till olika kontexter inom samma visningsyta. CSS Container Style Queries erbjuder en mer granulär och intuitiv lösning som låter element reagera på stilen som appliceras på deras innehållande element, vilket ger ett genuint komponentbaserat responsivt beteende.

Vad är CSS Container Style Queries?

Container Style Queries utökar kraften i containerfrågor bortom enkla storleksbaserade villkor. Istället för att kontrollera en behållares bredd eller höjd, låter de dig kontrollera närvaron av specifika CSS-egenskaper och värden som applicerats på den behållaren. Detta gör det möjligt för komponenter att anpassa sin stil baserat på behållarens kontext, snarare än bara dess dimensioner.

Tänk på det så här: istället för att fråga "Är visningsytan bredare än 768px?", kan du fråga "Har den här behållaren den anpassade egenskapen --theme: dark; satt?". Detta öppnar upp en helt ny värld av möjligheter för att skapa flexibla och återanvändbara komponenter som sömlöst kan anpassa sig till olika teman, layouter eller varumärkesvariationer på din webbplats eller applikation.

Fördelar med Container Style Queries

• Komponentbaserad responsivitet: Isolera responsivitet inom enskilda komponenter, vilket gör dem mer portabla och återanvändbara.
• Minskad CSS-komplexitet: Undvik överdrivet specifika mediafrågor som riktar in sig på särskilda skärmstorlekar.
• Förbättrad underhållbarhet: Ändringar i en komponents stil påverkar med mindre sannolikhet andra delar av webbplatsen.
• Teman och variationer: Skapa enkelt olika teman eller variationer för komponenter baserat på deras behållares stil. Detta är särskilt användbart för internationella varumärken som behöver tillämpa olika varumärkesriktlinjer i olika regioner.
• Förbättrad tillgänglighet: Att anpassa komponentstilar baserat på behållarkontext kan förbättra tillgängligheten genom att ge mer lämpliga visuella ledtrådar för användare med funktionsnedsättningar.
• Dynamisk innehållsanpassning: Komponenter kan justera sin layout och presentation baserat på typen av innehåll de har. Föreställ dig en sammanfattning av en nyhetsartikel som anpassar sig beroende på om den innehåller en bild eller inte.

Hur man använder CSS Container Style Queries

Här är en genomgång av hur man implementerar container style queries:

1. Konfigurera behållaren

Först måste du utse ett element som en behållare. Det gör du med egenskapen container-type:

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

            

              
                Copy
              
            
          

Värdet inline-size är det vanligaste och mest användbara, eftersom det låter behållaren fråga sin inline-storlek (horisontell). Du kan också använda size som frågar både inline- och blockstorlek. Att bara använda size kan ha prestandakonsekvenser om du inte är försiktig.

Alternativt, använd container-type: style för att använda en behållare endast för stilfrågor och inte storleksfrågor, eller container-type: size style för att använda båda. För att styra behållarens namn, använd container-name: my-container och rikta sedan in dig på den med @container my-container (...).

2. Definiera stilfrågor

Nu kan du använda @container style() at-regeln för att definiera stilar som tillämpas när ett specifikt villkor är uppfyllt:

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

            

              
                Copy
              
            
          

I detta exempel kommer stilarna inom @container-regeln endast att tillämpas på .component-elementet om dess innehållande element har den anpassade egenskapen --theme satt till dark.

3. Applicera stilar på behållaren

Slutligen måste du applicera de CSS-egenskaper som dina stilfrågor kontrollerar på behållarelementet:

            <div class="container" style="--theme: dark;">
  <div class="component">This is a component. </div>
</div>

            

              
                Copy
              
            
          

I detta exempel kommer .component att ha en mörk bakgrund och vit text eftersom dess behållare har stilen --theme: dark; applicerad direkt i HTML (för enkelhetens skull). Bästa praxis är att applicera stilar via CSS-klasser. Du kan också använda JavaScript för att dynamiskt ändra stilarna på behållaren, vilket utlöser uppdateringar av stilfrågor.

Praktiska exempel för globala applikationer

1. Komponenter med teman

Föreställ dig en webbplats som stöder flera teman. Du kan använda container style queries för att automatiskt justera stilen på komponenter baserat på det aktiva temat.

            /* 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>Card Title</h2>
    <p>Card content.</p>
  </div>
</div>

            

              
                Copy
              
            
          

I detta exempel kommer .card-komponenten automatiskt att växla mellan ett mörkt och ljust tema baserat på --theme-egenskapen hos dess behållare. Detta är mycket fördelaktigt för webbplatser där användare kan välja olika teman baserat på sina preferenser.

2. Layoutvariationer

Du kan använda container style queries för att skapa olika layoutvariationer för komponenter baserat på tillgängligt utrymme eller sidans övergripande layout. Tänk dig en språkvalskomponent. I huvudnavigationen kan det vara en kompakt rullgardinsmeny. I sidfoten kan det vara en fullständig lista över tillgängliga språk.

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

.footer {
  --layout: expanded;
}

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

@container style(--layout: expanded) {
  .language-selector {
    /* Styles for full list of languages */
  }
}

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

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

            

              
                Copy
              
            
          

Denna metod är värdefull för webbplatser som riktar sig till olika användargränssnitt på olika enheter och plattformar. Tänk på att mobil- och datorwebbplatsers strukturer ofta skiljer sig mycket, och detta kan hjälpa komponenter att anpassa sig.

3. Anpassning till innehållstyp

Tänk dig en nyhetswebbplats med artikelsammanfattningar. Du kan använda container style queries för att justera presentationen av sammanfattningar baserat på om de innehåller en bild eller inte.

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

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

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

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

            

              
                Copy
              
            
          

Detta möjliggör en mer visuellt tilltalande och informativ presentation av artikelsammanfattningar, vilket förbättrar användarupplevelsen. Notera att det inte är idealiskt att sätta --has-image-egenskapen direkt i HTML. En bättre metod vore att använda JavaScript för att upptäcka närvaron av en bild och dynamiskt lägga till eller ta bort en klass (t.ex. .has-image) på .article-summary-elementet, och sedan sätta den anpassade egenskapen --has-image inom CSS-regeln för .has-image-klassen.

4. Lokaliserad stil

För internationella webbplatser kan container style queries användas för att anpassa stilar baserat på språk eller region. Du kanske till exempel vill använda olika teckenstorlekar eller avstånd för språk med längre text.

            /* 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
              
            
          

Detta möjliggör skapandet av mer skräddarsydda och användarvänliga upplevelser för olika språkgrupper. Tänk på att vissa språk som arabiska och hebreiska skrivs från höger till vänster, och specifika stilar behöver tillämpas. För japanska och andra östasiatiska språk kan olika avstånd och teckenstorlekar behövas för att rendera tecknen korrekt.

5. Tillgänglighetsaspekter

Container style queries kan också förbättra tillgängligheten genom att anpassa komponentstilar baserat på användarpreferenser eller enhetskapaciteter. Du kan till exempel öka kontrasten för en komponent om användaren har aktiverat högkontrastläge i sitt 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
              
            
          

Detta säkerställer att din webbplats är användbar och tillgänglig för alla, oavsett deras förmågor. Notera användningen av mediafrågan @media (prefers-contrast: more) för att upptäcka högkontrastläge på operativsystemsnivå, och sedan sätta den anpassade egenskapen --high-contrast. Detta gör att du kan utlösa stiländringar med en stilfråga baserat på användarens systeminställningar.

Bästa praxis

• Använd beskrivande namn på anpassade egenskaper: Välj namn som tydligt indikerar egenskapens syfte (t.ex. --theme istället för --t).
• Håll stilfrågor enkla: Undvik komplex logik inom stilfrågor för att bibehålla läsbarhet och prestanda.
• Börja med en solid grund: Använd traditionell CSS och mediafrågor för grundläggande layout och stil. Container style queries bör förbättra, inte ersätta, din befintliga CSS.
• Tänk på prestanda: Även om container style queries generellt sett är effektiva, var medveten om antalet frågor du använder och komplexiteten i de stilar de utlöser. Överanvändning kan påverka prestandan, särskilt på äldre enheter.
• Testa noggrant: Testa dina komponenter i olika kontexter och webbläsare för att säkerställa att de anpassar sig korrekt.
• Använd fallbacks: Tillhandahåll reservstilar för webbläsare som ännu inte har fullt stöd för container style queries. Funktionsfrågor (@supports) kan användas för att villkorligt applicera kod för stilfrågor.
• Dokumentera dina komponenter: Dokumentera tydligt den avsedda användningen av varje komponent och de anpassade egenskaper den förlitar sig på.
• Tänk på kaskaden (the cascade): Kom ihåg att kaskaden fortfarande gäller inom container style queries. Var medveten om specificitet och arv när du definierar dina stilar.
• Använd JavaScript sparsamt: Även om du kan använda JavaScript för att dynamiskt ändra stilar på behållaren, försök att minimera dess användning. Förlita dig på CSS så mycket som möjligt för stiländringar.

Webbläsarstöd

Container style queries har utmärkt webbläsarstöd i moderna webbläsare som Chrome, Firefox, Safari och Edge. Äldre webbläsare kanske dock inte har fullt stöd för denna funktion. Se till att använda funktionsfrågor för att tillhandahålla reservstilar för dessa webbläsare eller använd en polyfill.

Slutsats

CSS Container Style Queries erbjuder en kraftfull och flexibel metod för responsiv design, som låter dig skapa genuint komponentbaserade och anpassningsbara webbplatser och applikationer. Genom att utnyttja stilen på behållarelement kan du låsa upp en ny nivå av kontroll och granularitet i dina designer, vilket resulterar i mer underhållbara, skalbara och användarvänliga upplevelser för en global publik.

Omfamna container style queries för att bygga responsiva komponenter som sömlöst anpassar sig till olika teman, layouter, språk och tillgänglighetskrav, och skapa en verkligt global webbupplevelse.

Resurser

• MDN Web Docs: CSS Container Queries
• CSS Container Style Queries – a First Look
• Container Style Queries Polyfills