CSS @when: Bemästra villkorlig styling för modern webbdesign

I det ständigt föränderliga landskapet för webbutveckling är förmågan att skapa dynamiska och responsiva användargränssnitt av yttersta vikt. CSS, hörnstenen i visuell presentation, fortsätter att introducera kraftfulla funktioner som ger utvecklare möjlighet att bygga mer intelligenta och anpassningsbara webbplatser. En sådan banbrytande funktion är @when-at-regeln, som möjliggör villkorlig styling, vilket gör att vi kan tillämpa CSS-regler endast när specifika villkor är uppfyllda. Detta öppnar upp en värld av möjligheter för att skapa verkligt responsiva och kontextmedvetna designer.

Vad är CSS @when?

@when-at-regeln är ett kraftfullt tillägg till CSS-specifikationen som fungerar tillsammans med @media- eller @supports-reglerna. Den fungerar som ett villkorligt block, vilket innebär att CSS-deklarationerna inom dess omfång endast kommer att tillämpas om det angivna villkoret utvärderas till sant. I grund och botten ger den ett mer detaljerat och uttrycksfullt sätt att kontrollera när vissa stilar är aktiva, och går bortom den traditionella blocknivåvillkoren för enbart @media-frågor.

Tänk på det som en högst förfinad `if`-sats för din CSS. Istället för att tillämpa en hel uppsättning stilar baserat på ett brett villkor, låter @when dig rikta in dig på specifika deklarationer inom en regel, vilket gör dina stilmallar mer effektiva och underhållbara.

Synergin: @when med @media och @supports

Den sanna kraften i @when förverkligas när den används i kombination med befintliga villkorliga at-regler:

1. @when med @media-frågor

Detta är utan tvekan det vanligaste och mest effektfulla användningsfallet för @when. Traditionellt sett skulle du kanske omsluta hela CSS-regler inom en @media-fråga. Med @when kan du nu villkorligt tillämpa specifika deklarationer inom en regel baserat på mediafrågevillkor.

Exempel: Responsiv typografi

Låt oss säga att du vill justera teckenstorleken för ett stycke, men bara när visningsområdet är bredare än 768 pixlar. Utan @when skulle du kanske göra så här:

            .my-paragraph {
  font-size: 16px;
}

@media (min-width: 768px) {
  .my-paragraph {
    font-size: 18px;
  }
}

            

              
                Copy
              
            
          

Nu, med @when, kan du uppnå samma resultat mer koncist och med större kontroll:

            .my-paragraph {
  font-size: 16px;
  @when (min-width: 768px) {
    font-size: 18px;
  }
}

            

              
                Copy
              
            
          

I detta exempel:

• Basstorleken font-size på 16px tillämpas alltid.
• font-size på 18px tillämpas endast när visningsområdets bredd är 768 pixlar eller mer.

Denna metod är otroligt användbar för att göra detaljerade justeringar av specifika egenskaper baserat på skärmstorlek, orientering eller andra mediefunktioner, utan att duplicera hela regeluppsättningar.

Globalt exempel: Anpassa UI-element för olika enheter

Tänk dig en global e-handelsplattform. Ett produktkort kan visa en kompakt vy på mobila enheter men en mer detaljerad vy på större skärmar. Med @when och @media kan du elegant hantera dessa övergångar:

            .product-card {
  padding: 10px;
  text-align: center;
  @when (min-width: 600px) {
    padding: 20px;
    text-align: left;
  }
  @when (min-width: 1024px) {
    padding: 30px;
    display: flex;
    align-items: center;
  }
}

.product-image {
  width: 100%;
  height: 150px;
  @when (min-width: 600px) {
    width: 200px;
    height: 200px;
  }
  @when (min-width: 1024px) {
    width: 250px;
    height: 250px;
    margin-right: 20px;
  }
}

            

              
                Copy
              
            
          

Detta gör att .product-card och dess interna element som .product-image kan anpassa sina stilar progressivt när visningsområdets storlek ökar, vilket ger en skräddarsydd upplevelse över ett brett spektrum av enheter globalt.

2. @when med @supports-frågor

@supports-at-regeln låter dig kontrollera om en webbläsare stöder ett specifikt CSS-egenskap-värde-par. Genom att kombinera den med @when kan du villkorligt tillämpa stilar endast när en viss webbläsarfunktion är tillgänglig.

Exempel: Använda en ny CSS-funktion

Föreställ dig att du vill använda den experimentella egenskapen backdrop-filter. Inte alla webbläsare eller äldre versioner stöder detta. Du kan använda @when med @supports för att tillämpa det på ett smidigt sätt:

            .modal-background {
  background-color: rgba(0, 0, 0, 0.5);
  @when supports (backdrop-filter: blur(10px)) {
    backdrop-filter: blur(10px);
  }
}

            

              
                Copy
              
            
          

I detta fall:

• background-color tillämpas alltid som en reservlösning.
• backdrop-filter tillämpas endast när webbläsaren stöder deklarationen backdrop-filter: blur(10px).

Detta är avgörande för progressiv förbättring, vilket säkerställer att din design är funktionell och visuellt tilltalande även i miljöer som inte stöder de senaste CSS-funktionerna.

Globalt exempel: Progressiv förbättring för animationer

Tänk dig en webbplats med subtila animationer. Vissa avancerade animationer kan förlita sig på nyare CSS-egenskaper som animation-composition eller specifika easing-funktioner. Du kan använda @when och @supports för att erbjuda en reservlösning eller en enklare animation för webbläsare som inte stöder dessa avancerade egenskaper.

            .animated-element {
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;

  @when supports (animation-composition: replace) {
    /* Mer avancerade animationsegenskaper eller sekvenser */
    animation: slideIn 1s forwards;
    animation-composition: replace;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  }
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

            

              
                Copy
              
            
          

Här kommer webbläsare som stöder animation-composition: replace att få en mer sofistikerad animationssekvens, medan andra kommer att falla tillbaka på den enklare transition-egenskapen, vilket säkerställer en konsekvent, om än varierad, upplevelse för användare över hela världen.

3. Kombinera @when med flera villkor

Du kan också kedja flera villkor inom en enda @when-regel, vilket skapar ännu mer specifik stylinglogik. Detta görs med logiska operatorer som and, or och not.

Exempel: Komplex responsiv logik

Låt oss föreställa oss ett scenario där en sidofält endast ska döljas på mindre skärmar, men bara om en specifik användarinställning (hypotetiskt indikerad av en klass på body-elementet) inte är aktiv.

            .sidebar {
  display: block;
  width: 250px;

  /* Dölj sidofält på små skärmar OCH inte i preferensläge */
  @when (max-width: 767px) and not (.no-sidebar-on-mobile) {
    display: none;
  }

  /* Visa sidofält på större skärmar ELLER om preferensläge är aktivt på små skärmar */
  @when (min-width: 768px) or (.sidebar-on-mobile) {
    display: block;
  }
}

            

              
                Copy
              
            
          

Denna nivå av villkorlig styling möjliggör mycket invecklade UI-beteenden som är skräddarsydda för specifika sammanhang och användarinteraktioner.

Syntax och bästa praxis

Grundsyntaxen för @when är enkel:

            selector {
  property: value;
  @when (condition) {
    property: value;
  }
}

            

              
                Copy
              
            
          

När man kombinerar flera villkor blir syntaxen:

            selector {
  property: value;
  @when (condition1) and (condition2) {
    property: value;
  }
  @when (condition1) or (condition2) {
    property: value;
  }
  @when not (condition) {
    property: value;
  }
}

            

              
                Copy
              
            
          

Viktiga bästa praxis:

• Prioritera läsbarhet: Även om @when kan göra stilar mer koncisa, undvik alltför komplexa nästlade villkor som kan bli svåra att tolka. Bryt ner komplex logik i separata regler om det behövs.
• Progressiv förbättring: Tillhandahåll alltid en smidig reservlösning för webbläsare eller miljöer som inte stöder de funktioner som dina @when-regler riktar sig till, särskilt när de används med @supports.
• Prestanda: Även om @when i sig är generellt effektivt, var medveten om alltför komplex villkorlig logik som kan påverka tolkningsprestandan, även om detta sällan är ett problem vid typisk användning.
• Webbläsarstöd: Håll ett öga på webbläsarstödet för @when och dess medföljande at-regler. Vid dess introduktion växer anammandet, men det är viktigt att testa i dina målwebbläsare. Använd verktyg som Can I Use för att kontrollera den senaste kompatibilitetsinformationen.
• Global räckvidd: När du designar för en global publik, utnyttja @when med @media för att tillgodose det stora utbudet av enhetsstorlekar och upplösningar som är vanliga över hela världen. Tänk också på olika nätverksförhållanden; du kan använda prefers-reduced-motion mediafrågor inom @when för att inaktivera animationer för användare som har valt bort det.
• Underhållbarhet: Använd @when för att hålla relaterade stilar samlade. Om en egenskaps värde ändras baserat på ett villkor är det ofta mer underhållbart att ha både standardvärdet och det villkorliga värdet inom samma regelblock, istället för att sprida ut dem över olika @media-frågor.

Webbläsarstöd och framtidsutsikter

@when-at-regeln är ett relativt nytt tillägg i CSS-landskapet. Vid dess initiala utbredda anammande stöds den i moderna webbläsare som Chrome, Firefox, Safari och Edge. Det är dock avgörande att alltid kontrollera de senaste uppgifterna om webbläsarkompatibilitet för specifika versioner och funktioner.

W3C CSS Working Group fortsätter att förfina och utöka CSS-kapaciteterna. Funktioner som @when, tillsammans med andra villkorliga regler och nästling, signalerar en rörelse mot mer programmatiska och uttrycksfulla stylingmöjligheter i CSS. Denna trend är avgörande för att bygga komplexa, anpassningsbara och användarvänliga webbupplevelser som tillgodoser en mångfaldig global användarbas.

Allt eftersom webbdesign fortsätter att omfamna anpassningsbarhet och personalisering kommer @when att bli ett oumbärligt verktyg i utvecklarens arsenal. Dess förmåga att finjustera stilar baserat på ett brett spektrum av villkor, från enhetsegenskaper till webbläsarkapacitet, ger oss möjlighet att skapa mer sofistikerade och kontextmedvetna gränssnitt.

Slutsats

CSS @when är en kraftfull och elegant funktion som avsevärt förbättrar vår förmåga att skriva villkorliga stilar. Genom att utnyttja dess synergi med @media och @supports kan utvecklare skapa mer responsiva, anpassningsbara och robusta webbdesigner. Oavsett om du justerar typografi för olika skärmstorlekar, villkorligt tillämpar avancerade CSS-funktioner eller bygger komplexa interaktiva UI:n, ger @when den precision och flexibilitet som krävs för att möta kraven från modern webbutveckling. Att omfamna denna funktion kommer utan tvekan att leda till mer sofistikerade och användarcentrerade digitala upplevelser för en global publik.

Börja experimentera med @when i dina projekt idag för att bygga smartare, mer anpassningsbara och framtidssäkra webbplatser.