CSS @when: Framtiden för villkorlig styling

Webbutvecklingens värld utvecklas ständigt, och CSS är inget undantag. Ett av de mest spännande och lovande tillskotten på CSS-scenen är @when-regeln. Denna kraftfulla funktion introducerar ett nytt sätt att tillämpa stilar villkorligt, vilket går bortom begränsningarna hos traditionella mediafrågor och öppnar upp för mer dynamiska och responsiva designer.

Vad är CSS @when?

@when-regeln låter dig tillämpa CSS-stilar baserat på specifika villkor. Den fungerar som ett mer mångsidigt och uttrycksfullt alternativ till mediafrågor, containerfrågor och till och med JavaScript-baserade lösningar för villkorlig styling. Tänk på det som en "om-då"-sats för din CSS.

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

            @when (villkor) {
  /* Stilar att tillämpa när villkoret är sant */
}

            

              
                Copy
              
            
          

villkor kan vara en mängd olika logiska uttryck, vilket gör @when-regeln otroligt flexibel. Vi kommer att utforska några specifika exempel senare i denna artikel.

Varför använda @when? Fördelar och vinster

@when-regeln erbjuder flera viktiga fördelar jämfört med befintliga metoder för villkorlig styling:

• Ökad flexibilitet: Till skillnad från mediafrågor, som primärt baseras på visningsområdets storlek, låter @when dig basera stilar på ett brett spektrum av faktorer, inklusive anpassade egenskaper (CSS-variabler), elementattribut och potentiellt även närvaron eller frånvaron av specifika HTML-element.
• Förbättrad läsbarhet och underhåll: Genom att kapsla in villkorlig logik direkt i din CSS gör @when din kod mer självförklarande och lättare att förstå. Detta minskar behovet av komplexa JavaScript-lösningar och förbättrar den övergripande underhållbarheten av dina stilmallar.
• Förbättrad återanvändbarhet: Du kan definiera komplexa villkorliga stilar inom @when-regler och återanvända dem på hela din webbplats eller applikation. Detta främjar kodåteranvändning och minskar redundans.
• Potentiellt bättre prestanda: I vissa fall kan användningen av @when leda till prestandaförbättringar jämfört med JavaScript-baserade lösningar, eftersom webbläsaren kan hantera den villkorliga logiken direkt.
• Framtidssäkra din kod: I takt med att CSS fortsätter att utvecklas, erbjuder @when en solid grund för att bygga mer dynamiska och responsiva användargränssnitt.

Förstå villkorssyntaxen

Den verkliga kraften i @when ligger i dess förmåga att hantera en stor variation av villkor. Här är några exempel:

1. Kontrollera anpassade egenskaper (CSS-variabler)

Du kan använda anpassade egenskaper för att lagra tillståndsinformation och sedan använda @when för att tillämpa stilar baserat på värdet av dessa egenskaper. Detta är särskilt användbart för att skapa teman eller låta användare anpassa utseendet på din webbplats.

            :root {
  --theme-color: #007bff; /* Standard temafärg */
  --font-size: 16px;
}

@when (--theme-color = #007bff) {
  body {
    background-color: #f0f8ff; /* Applicera en ljus bakgrund när temafärgen är blå */
  }
}

@when (--font-size > 18px) {
  p {
    line-height: 1.6;
  }
}

            

              
                Copy
              
            
          

I detta exempel kontrollerar den första @when-regeln om den anpassade egenskapen --theme-color är lika med #007bff. Om den är det, appliceras en ljus bakgrundsfärg på body-elementet. Den andra @when-regeln kontrollerar om --font-size är större än 18px, och om så är fallet justerar den radhöjden för styckeelement.

2. Utvärdera booleska villkor

@when kan också hantera booleska villkor, vilket gör att du kan tillämpa stilar baserat på om ett visst villkor är sant eller falskt. Detta kan vara särskilt användbart för att växla stilar baserat på användarpreferenser eller applikationstillstånd.

            :root {
  --dark-mode: false;
}

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

            

              
                Copy
              
            
          

I detta exempel kontrollerar @when-regeln om den anpassade egenskapen --dark-mode är satt till true. Om den är det, appliceras en mörk bakgrundsfärg och ljus textfärg på body-elementet, vilket i praktiken aktiverar ett mörkt läge.

3. Kombinera villkor med logiska operatorer

För mer komplexa scenarier kan du kombinera flera villkor med logiska operatorer som and, or och not. Detta gör att du kan skapa mycket specifika och nyanserade villkorliga stilar.

            :root {
  --is-mobile: false;
  --is-logged-in: true;
}

@when (--is-mobile = true and --is-logged-in = true) {
  /* Stilar som endast ska tillämpas på mobila enheter och när användaren är inloggad */
  .mobile-menu {
    display: block;
  }
}

            

              
                Copy
              
            
          

I detta exempel kontrollerar @when-regeln om både --is-mobile och --is-logged-in är satta till true. Om båda villkoren är uppfyllda visas ett mobilt menyelement.

4. Kontrollera elementattribut

Även om den exakta syntaxen kan utvecklas, tillåter de föreslagna specifikationerna att man kontrollerar elementattribut direkt i villkoret. Detta kan vara otroligt användbart för att stilsätta element baserat på deras attribut, vilket potentiellt kan ersätta behovet av JavaScript-baserade attributväljare i många fall.

            @when (element.hasAttribute('data-active')) {
  [data-active] {
    border: 2px solid blue;
  }
}

@when (element.getAttribute('data-theme') = 'dark') {
  body {
    background-color: black;
    color: white;
  }
}

            

              
                Copy
              
            
          

Det första exemplet kontrollerar om ett element har attributet `data-active`. Det andra exemplet kontrollerar om attributet `data-theme` är lika med 'dark'.

5. Stilfrågor och containerfrågor (potentiell integration)

Även om det fortfarande är under utveckling, finns det potential för @when att integreras med stilfrågor och containerfrågor. Detta skulle göra det möjligt att tillämpa stilar baserat på de stilar som applicerats på en föräldracontainer eller storleken på en container, vilket ytterligare förbättrar responsiviteten och anpassningsförmågan hos dina designer. Detta är särskilt intressant eftersom den nuvarande syntaxen för containerfrågor är ganska omständlig; `@when` kan erbjuda ett mer koncis alternativ.

Praktiska exempel och användningsfall

Låt oss utforska några praktiska exempel på hur du kan använda @when-regeln i verkliga scenarier:

1. Dynamiskt temabyte

Som visats tidigare kan du enkelt implementera dynamiskt temabyte med hjälp av anpassade egenskaper och @when-regeln. Detta gör att användare kan anpassa utseendet på din webbplats baserat på sina preferenser.

2. Adaptiva navigeringsmenyer

Du kan använda @when för att skapa navigeringsmenyer som anpassar sig till olika skärmstorlekar eller enhetsorienteringar. Till exempel kan du visa en fullständig navigeringsmeny på datorskärmar och en hamburgermeny på mobila enheter.

3. Formulärvalidering

Du kan använda @when för att stilsätta formulärelement baserat på deras valideringsstatus. Till exempel kan du markera ogiltiga inmatningsfält med en röd ram.

4. Synlighet för innehåll

@when kan användas för att visa eller dölja innehåll baserat på olika villkor. Du kan visa en specifik kampanjbanner endast för användare som inte redan har sett den, baserat på ett cookie-värde eller en användarinställning.

5. Internationalisering (i18n)

Även om det inte är dess primära syfte, skulle @when kunna användas i kombination med anpassade egenskaper för att anpassa styling baserat på användarens språkinställning. Till exempel kan du justera teckenstorlekar eller avstånd för att bättre passa olika teckenuppsättningar.

Till exempel, om vi antar att du har en anpassad egenskap `--locale` som lagrar användarens språk:

            :root {
  --locale: 'en-US'; /* Standardspråk */
}

@when (--locale = 'ar') { /* Arabiska */
  body {
    direction: rtl; /* Höger-till-vänster-layout */
    font-family: 'Arial', sans-serif; /* Exempeltypsnitt */
  }
}

@when (--locale = 'zh-CN') { /* Förenklad kinesiska */
  body {
    font-family: 'Microsoft YaHei', sans-serif; /* Exempeltypsnitt */
    font-size: 14px; /* Justera teckenstorlek vid behov */
  }
}

            

              
                Copy
              
            
          

Detta exempel justerar textriktningen och typsnittet baserat på om språket är arabiska (`ar`) eller förenklad kinesiska (`zh-CN`). Även om detta inte är en direkt ersättning för ordentliga i18n-tekniker (som att servera olika innehåll), visar det hur @when kan bidra till en mer lokaliserad upplevelse.

Nuvarande status och webbläsarstöd

I slutet av 2024 är @when-regeln fortfarande en relativt ny funktion och stöds ännu inte fullt ut av alla större webbläsare. Den är för närvarande bakom experimentella flaggor i vissa webbläsare som Chrome och Edge.

Du kan följa utvecklingen av @when och dess webbläsarstöd på webbplatser som Can I use och de officiella CSS-specifikationerna.

Viktigt att notera: Eftersom funktionen är experimentell kan den exakta syntaxen och beteendet hos @when-regeln ändras innan den är slutförd och fullt stödd av alla webbläsare. Det är viktigt att hålla sig uppdaterad med den senaste utvecklingen och anpassa din kod därefter.

Polyfills och workarounds

I väntan på fullt webbläsarstöd kan du använda polyfills eller JavaScript-baserade workarounds för att efterlikna beteendet hos @when-regeln. Dessa lösningar innebär vanligtvis att man använder JavaScript för att utvärdera villkoren och tillämpa lämpliga stilar.

Tänk dock på att polyfills och workarounds kan ha prestandakonsekvenser och kanske inte perfekt replikerar beteendet hos den inbyggda @when-regeln. Det är viktigt att noggrant överväga avvägningarna innan du använder dem i produktionsmiljöer.

Bästa praxis för att använda @when

Här är några bästa praxis att tänka på när du använder @when-regeln:

• Använd tydliga och koncisa villkor: Se till att dina villkor är lätta att förstå och undvik alltför komplexa uttryck.
• Dokumentera din kod: Lägg till kommentarer för att förklara syftet med dina @when-regler, särskilt om de involverar komplex logik.
• Testa noggrant: Testa din kod i olika webbläsare och på olika enheter för att säkerställa att den fungerar som förväntat.
• Tänk på prestanda: Undvik att använda överdrivet komplexa @when-regler som kan påverka prestandan negativt.
• Progressiv förbättring: Använd @when som en progressiv förbättring. Din grundläggande styling ska fungera även utan den, och @when-regeln ska endast lägga till extra funktionalitet.

Framtiden för villkorlig styling i CSS

@when-regeln representerar ett betydande steg framåt i utvecklingen av villkorlig styling i CSS. Den erbjuder ett mer flexibelt, läsbart och underhållbart alternativ till traditionella mediafrågor och JavaScript-baserade lösningar.

I takt med att webbläsarstödet för @when växer, kommer den troligen att bli ett allt viktigare verktyg för webbutvecklare. Genom att anamma denna nya funktion kan du bygga mer dynamiska, responsiva och användarvänliga webbapplikationer.

Alternativ och överväganden

Även om @when erbjuder övertygande fördelar, är det viktigt att överväga befintliga alternativ och scenarier där de kan vara mer lämpliga:

• Mediafrågor: För enkla visningsområdesbaserade justeringar förblir mediafrågor ett rakt och väl understött alternativ.
• Containerfrågor: När man stilsätter komponenter baserat på storleken på deras containrar kommer containerfrågor (när de väl stöds fullt ut) att vara ett kraftfullt val. Dock kan @when erbjuda en mer koncis syntax för vissa containerfrågescenarier.
• JavaScript: För mycket komplex villkorlig logik eller vid interaktion med externa API:er kan JavaScript fortfarande vara nödvändigt. Sikta dock på att flytta logik till CSS där det är möjligt för bättre prestanda och underhållbarhet.
• CSS-funktionsfrågor (@supports): Använd @supports för att upptäcka om en viss CSS-funktion stöds av webbläsaren. Detta är avgörande för att tillhandahålla reservstilar när @when inte är tillgängligt.

Verkligt exempel: Komponentbaserad styling med @when

Låt oss föreställa oss ett scenario där du har en återanvändbar "kort"-komponent på din webbplats. Du vill stilsätta kortet annorlunda beroende på om det är utvalt eller inte, och om användaren är inloggad. Vi kommer att använda anpassade egenskaper för att hantera dessa tillstånd.

            /* Grundläggande kortstyling */
.card {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 20px;
}

/* Styling för utvalt kort */
@when (element.hasAttribute('data-featured')) {
  .card[data-featured] {
    border-color: #007bff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .card[data-featured] .card-title {
    font-weight: bold;
    color: #007bff;
  }
}

/* Användarspecifik styling (kräver JavaScript för att sätta --logged-in) */
@when (--logged-in = true) {
  .card {
    /* Ytterligare styling för inloggade användare */
    background-color: #f9f9f9;
  }
}

/* Kombinera villkor */
@when (element.hasAttribute('data-featured') and --logged-in = true) {
  .card[data-featured] {
    /* Ännu mer specifik styling */
    background-color: #e9ecef;
    transform: translateY(-5px); /* Subtil lyfteffekt */
  }
}

            

              
                Copy
              
            
          

I detta exempel:

• Det första @when-blocket stilsätter kortet när det har attributet data-featured.
• Det andra @when-blocket ger en användarspecifik stil för inloggade användare (förutsatt att du har en JavaScript-mekanism för att sätta den anpassade egenskapen `--logged-in`).
• Det sista @when-blocket kombinerar båda villkoren och tillämpar ännu mer specifik styling när båda villkoren är uppfyllda.

Detta exempel visar flexibiliteten hos @when för att hantera komplexa villkorliga stylingscenarier inom en komponentbaserad arkitektur.

Slutsats

CSS @when-regeln är en banbrytande funktion som ger webbutvecklare möjlighet att skapa mer dynamiska, responsiva och underhållbara stilmallar. I takt med att webbläsarstödet mognar är @when på väg att bli ett oumbärligt verktyg för att bygga moderna webbapplikationer. Genom att anamma denna kraftfulla nya funktion kan du låsa upp nya möjligheter för villkorlig styling och leverera exceptionella användarupplevelser.

Håll utkik efter framtida uppdateringar och utvecklingar då @when-regeln fortsätter att utvecklas och forma framtiden för CSS!

Vidare läsning och resurser

• CSS Conditional Rules Module Level 3 (Officiell specifikation - håll utkik efter uppdateringar!)
• Can I use... (Spårning av webbläsarstöd)
• Mozilla Developer Network (MDN) (CSS-dokumentation)