CSS @when Regel: Bemästra Villkorlig Stilapplikation

CSS-världen utvecklas ständigt och erbjuder utvecklare mer kraftfulla och flexibla sätt att styla webbsidor. En sådan funktion som får allt större genomslag är @when-regeln, även känd som CSS Conditional Rules Module Level 1. Denna regel låter dig applicera CSS-stilar villkorligt, baserat på att specifika villkor är uppfyllda. Det är ett kraftfullt verktyg för responsiv design, funktionsdetektering och för att skapa mer robusta och anpassningsbara stylesheets.

Vad är CSS @when-regeln?

@when-regeln är en villkorlig at-regel i CSS som låter dig definiera stilar som endast tillämpas om vissa villkor är sanna. Tänk på det som ett if-uttalande för din CSS. Till skillnad från mediatillfråganden, som främst fokuserar på fönsterkarakteristika (skärmstorlek, orientering etc.), ger @when ett mer generellt och utbyggbart sätt att hantera villkorlig stil. Den utökar befintliga villkorliga at-regler som @supports och @media.

Viktiga Fördelar med att Använda @when

Förbättrad Kodläsbarhet: Genom att inkapsla villkorlig logik inom @when-block gör du din CSS enklare att förstå och underhålla. Syftet bakom specifika stilapplikationer blir tydligare.
Förbättrad Flexibilitet: @when kan hantera mer komplexa villkor än traditionella mediatillfråganden, särskilt när det kombineras med funktionsfrågor och JavaScript-driven logik (med hjälp av CSS Custom Properties).
Förenklad Funktionsdetektering: @when integreras sömlöst med @supports, vilket låter dig applicera stilar endast när specifika webbläsarfunktioner är tillgängliga. Detta är avgörande för progressiv förbättring.
Mer Semantisk Stil: @when låter dig styla element baserat på deras status eller kontext, vilket leder till mer semantisk och underhållbar CSS. Till exempel, stilning av element baserat på dataattribut eller anpassade egenskaper inställda av JavaScript.

Syntax för @when-regeln

Den grundläggande syntaxen för @when-regeln är som följer:

@when <villkor> {
  /* CSS-regler som ska tillämpas när villkoret är sant */
}

<villkor> kan vara vilket giltigt booleskt uttryck som helst som utvärderas till sant eller falskt. Detta uttryck involverar ofta:

Mediatillfråganden: Villkor baserade på fönsterkarakteristika (t.ex. skärmbredd, enhetsorientering).
Funktionsfrågor (@supports): Villkor baserade på webbläsarstöd för specifika CSS-funktioner.
Boolesk Algebra: Kombinera flera villkor med logiska operatorer (and, or, not).

Praktiska Exempel på @when i Användning

Låt oss utforska några praktiska exempel för att illustrera kraften och mångsidigheten hos @when-regeln.

1. Responsiv Design med @when och Mediatillfråganden

Det vanligaste användningsfallet för @when är responsiv design, där du justerar stilar baserat på skärmstorlek. Även om mediatillfråganden kan uppnå detta på egen hand, ger @when ett mer strukturerat och läsbart tillvägagångssätt, särskilt vid hantering av komplexa villkor.

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

I detta exempel tillämpas stilarna inom @when-blocket endast när skärmbredden är mellan 768px och 1023px (typisk surfplattastorlek). Detta ger ett tydligt och koncist sätt att definiera stilar för specifika fönsterintervall.

Internationell Notering: Responsiv design är avgörande för en global publik. Tänk på varierande skärmstorlekar i olika regioner. Till exempel är mobilanvändning högre i vissa länder, vilket gör mobil-först design ännu viktigare.

2. Funktionsdetektering med @when och @supports

@when kan kombineras med @supports för att applicera stilar endast när en specifik CSS-funktion stöds av webbläsaren. Detta låter dig progressivt förbättra din webbplats, vilket ger en bättre upplevelse för användare med moderna webbläsare samtidigt som kompatibiliteten med äldre upprätthålls.

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Fallback-stilar för webbläsare som inte stöder grid */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Justera bredden för äldre webbläsare */
  }
}

Här använder vi @supports för att kontrollera om webbläsaren stöder CSS Grid Layout. Om den gör det, tillämpar vi grid-baserade stilar på .container. Om inte, tillhandahåller vi fallback-stilar med flexbox för att säkerställa att en liknande layout uppnås i äldre webbläsare.

Global Tillgänglighetsnotering: Funktionsdetektering är viktig för tillgänglighet. Äldre webbläsare kanske saknar stöd för nyare ARIA-attribut eller semantiska HTML5-element. Ge lämpliga fallbacks för att säkerställa att innehållet förblir tillgängligt.

3. Kombinera Mediatillfråganden och Funktionsfrågor

Den verkliga kraften hos @when ligger i dess förmåga att kombinera mediatillfråganden och funktionsfrågor för att skapa mer komplexa och nyanserade villkorliga stilregler.

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

I detta exempel kommer .modal-elementet endast att ha en suddig bakgrund när skärmbredden är minst 768px och webbläsaren stöder egenskapen backdrop-filter. Detta låter dig skapa visuellt tilltalande effekter i moderna webbläsare, samtidigt som potentiella prestandaproblem eller renderingfel i äldre undviks.

4. Stilning Baserad på Anpassade Egenskaper (CSS-variabler)

@when kan också användas i kombination med CSS Custom Properties (även kända som CSS-variabler) för att skapa dynamiska och tillstånds-drivna stilar. Du kan använda JavaScript för att uppdatera värdet på en anpassad egenskap och sedan använda @when för att tillämpa olika stilar baserat på det värdet. Definiera först en anpassad egenskap:

:root {
  --theme-color: #007bff; /* Standard temafärg */
  --is-dark-mode: false;
}

Använd sedan @when för att tillämpa stilar baserat på värdet av den anpassade egenskapen:

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

Slutligen, använd JavaScript för att växla värdet på --is-dark-mode-egenskapen:

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

Detta låter användare växla mellan ljusa och mörka teman, där CSS dynamiskt uppdateras baserat på värdet av den anpassade egenskapen. Observera att direkt jämförelse av CSS-variabler i `@when` kanske inte stöds universellt i alla webbläsare. Istället kan du behöva använda en lösning med en mediatillfrågan som kontrollerar ett icke-nollvärde:

@when ( --is-dark-mode > 0 ) { ... }

Men se till att den anpassade egenskapen har ett numeriskt värde för att detta ska fungera korrekt.

Tillgänglighetsnotering: Att erbjuda alternativa teman (t.ex. mörkt läge) är avgörande för tillgänglighet. Användare med synnedsättning kan ha nytta av högkontrastteman. Se till att din temaväxlare är tillgänglig via tangentbord och skärmläsare.

5. Stilning Baserad på Dataattribut

Du kan också använda @when med dataattribut för att styla element baserat på deras datavärden. Detta kan vara användbart för att skapa dynamiska gränssnitt där element ändrar utseende baserat på användarinteraktion eller datauppdateringar. Låt oss säga att du har en lista med uppgifter, och varje uppgift har ett data-status-attribut som anger dess status (t.ex. "todo", "in-progress", "completed"). Du kan använda @when för att styla varje uppgift annorlunda baserat på dess status.

[data-status="todo"] {
  /* Standardstilar för todo-uppgifter */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

Observera: Stöd för `attribute()`-testvillkoret kan vara begränsat eller inte helt implementerat i alla webbläsare för närvarande. Testa alltid noggrant.

Webbläsarkompatibilitet och Polyfills

I slutet av 2024 utvecklas webbläsarstödet för @when-regeln fortfarande. Medan många moderna webbläsare stöder kärnfunktionaliteten, kanske äldre webbläsare inte gör det. Därför är det avgörande att kontrollera kompatibilitetstabeller och använda lämpliga fallbacks eller polyfills där det behövs. Konsultera alltid resurser som Can I use... för att kontrollera den aktuella statusen för webbläsarstödet för @when och relaterade funktioner.

Bästa Praxis för Användning av @when

Håll Villkor Enkla: Undvik alltför komplexa villkor inom @when-block. Bryt ner komplex logik i mindre, mer hanterbara delar.
Tillhandahåll Fallbacks: Tillhandahåll alltid fallback-stilar för webbläsare som inte stöder de funktioner du använder i dina @when-regler. Detta säkerställer en konsekvent upplevelse på olika webbläsare.
Testa Noggrant: Testa din CSS i en mängd olika webbläsare och enheter för att säkerställa att dina @when-regler fungerar som förväntat.
Använd Meningsfulla Kommentarer: Lägg till kommentarer i din CSS för att förklara syftet med varje @when-regel och de villkor den baseras på. Detta gör din kod lättare att förstå och underhålla.
Överväg Prestanda: Undvik att använda @when-regler överdrivet, eftersom de potentiellt kan påverka prestandan. Optimera din CSS för att minimera antalet regler som behöver utvärderas.

Slutsats

@when-regeln är ett kraftfullt tillägg till CSS-verktygslådan, som erbjuder utvecklare ett mer flexibelt och uttrycksfullt sätt att applicera stilar villkorligt. Genom att kombinera den med mediatillfråganden, funktionsfrågor och CSS Custom Properties kan du skapa mer robusta, anpassningsbara och underhållbara stylesheets. Även om webbläsarstödet fortfarande utvecklas, är @when en funktion värd att utforska och integrera i ditt moderna webbutvecklingsflöde. Allt eftersom webben fortsätter att utvecklas, kommer det att vara avgörande att bemästra funktioner som @when för att skapa engagerande, tillgängliga och performanta upplevelser för användare över hela världen. Omfamna kraften i villkorlig stil och lås upp nya möjligheter i din CSS-utveckling.