CSS @when: Mestre betinget styling for moderne webdesign

I det stadig utviklende landskapet innen webutvikling er evnen til å skape dynamiske og responsive brukergrensesnitt avgjørende. CSS, hjørnesteinen i visuell presentasjon, fortsetter å introdusere kraftige funksjoner som gir utviklere muligheten til å bygge mer intelligente og adaptive nettsteder. En slik banebrytende funksjon er @when at-regelen, som tillater betinget styling, slik at vi kan anvende CSS-regler bare når spesifikke betingelser er oppfylt. Dette åpner for en verden av muligheter for å skape virkelig responsive og kontekstbevisste design.

Hva er CSS @when?

@when at-regelen er et kraftig tillegg til CSS-spesifikasjonen som fungerer i samspill med @media- eller @supports-reglene. Den fungerer som en betinget blokk, noe som betyr at CSS-deklarasjonene innenfor dens virkeområde bare vil bli anvendt hvis den spesifiserte betingelsen evalueres som sann. I hovedsak gir den en mer detaljert og uttrykksfull måte å kontrollere når visse stiler er aktive, og går utover den tradisjonelle blokknivå-betingelsen til @media-spørringer alene.

Tenk på det som en svært raffinert `if`-setning for din CSS. I stedet for å anvende et helt sett med stiler basert på en bred betingelse, lar @when deg målrette spesifikke deklarasjoner innenfor en regel, noe som gjør stilarkene dine mer effektive og vedlikeholdbare.

Synergien: @when med @media og @supports

Den sanne kraften til @when realiseres når den brukes i kombinasjon med eksisterende betingede at-regler:

1. @when med @media-spørringer

Dette er uten tvil det vanligste og mest virkningsfulle bruksområdet for @when. Tradisjonelt ville du kanskje pakket hele CSS-regler inn i en @media-spørring. Med @when kan du nå betinget anvende spesifikke deklarasjoner innenfor en regel basert på media-spørringsbetingelser.

Eksempel: Responsiv typografi

La oss si at du vil justere skriftstørrelsen på et avsnitt, men bare når visningsporten er bredere enn 768 piksler. Uten @when ville du kanskje gjort dette:

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

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

            

              
                Copy
              
            
          

Nå, ved å bruke @when, kan du oppnå det samme resultatet mer konsist og med større kontroll:

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

            

              
                Copy
              
            
          

I dette eksempelet:

• Grunn-font-size på 16px blir alltid anvendt.
• font-size på 18px blir anvendt bare når visningsportens bredde er 768 piksler eller mer.

Denne tilnærmingen er utrolig nyttig for å gjøre detaljerte justeringer av spesifikke egenskaper basert på skjermstørrelse, orientering eller andre medieegenskaper, uten å duplisere hele regelsett.

Globalt eksempel: Tilpasse UI-elementer for forskjellige enheter

Tenk deg en global e-handelsplattform. Et produktkort kan vise en kompakt visning på mobile enheter, men en mer detaljert visning på større skjermer. Ved å bruke @when med @media kan du elegant håndtere disse overgangene:

            .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
              
            
          

Dette lar .product-card og dets interne elementer som .product-image tilpasse stilene sine progressivt etter hvert som visningsportens størrelse øker, og gir en skreddersydd opplevelse på tvers av et bredt spekter av enheter globalt.

2. @when med @supports-spørringer

@supports at-regelen lar deg sjekke om en nettleser støtter et spesifikt CSS-egenskap-verdi-par. Ved å kombinere den med @when, kan du betinget anvende stiler bare når en bestemt nettleserfunksjon er tilgjengelig.

Eksempel: Bruke en ny CSS-funksjon

Tenk deg at du vil bruke den eksperimentelle egenskapen backdrop-filter. Ikke alle nettlesere eller eldre versjoner støtter dette. Du kan bruke @when med @supports for å anvende den på en smidig måte:

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

            

              
                Copy
              
            
          

I dette tilfellet:

• background-color blir alltid anvendt som en reserve (fallback).
• backdrop-filter blir anvendt bare når nettleseren støtter deklarasjonen backdrop-filter: blur(10px).

Dette er avgjørende for progressiv forbedring (progressive enhancement), og sikrer at designet ditt er funksjonelt og visuelt tiltalende selv i miljøer som ikke støtter de nyeste CSS-funksjonene.

Globalt eksempel: Progressiv forbedring for animasjoner

Tenk deg et nettsted med subtile animasjoner. Noen avanserte animasjoner kan være avhengige av nyere CSS-egenskaper som animation-composition eller spesifikke «easing»-funksjoner. Du kan bruke @when og @supports for å tilby en reserve eller en enklere animasjon for nettlesere som ikke støtter disse avanserte egenskapene.

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

  @when supports (animation-composition: replace) {
    /* More advanced animation properties or sequences */
    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
              
            
          

Her vil nettlesere som støtter animation-composition: replace få en mer sofistikert animasjonssekvens, mens andre vil falle tilbake på den enklere transition-egenskapen, noe som sikrer en konsistent, om enn variert, opplevelse for brukere over hele verden.

3. Kombinere @when med flere betingelser

Du kan også kjede flere betingelser innenfor en enkelt @when-regel, og skape enda mer spesifikk stylinglogikk. Dette gjøres ved hjelp av logiske operatorer som and, or, og not.

Eksempel: Kompleks responsiv logikk

La oss forestille oss et scenario der en sidestolpe bare skal skjules på mindre skjermer, men bare hvis en spesifikk brukerpreferanse (hypotetisk indikert av en klasse på body-elementet) ikke er aktiv.

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

  /* Hide sidebar on small screens AND not in preference mode */
  @when (max-width: 767px) and not (.no-sidebar-on-mobile) {
    display: none;
  }

  /* Show sidebar on larger screens OR if preference mode is active on small screens */
  @when (min-width: 768px) or (.sidebar-on-mobile) {
    display: block;
  }
}

            

              
                Copy
              
            
          

Dette nivået av betinget styling gir mulighet for svært intrikate UI-atferder skreddersydd for spesifikke kontekster og brukerinteraksjoner.

Syntaks og beste praksis

Grunnsyntaksen for @when er enkel:

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

            

              
                Copy
              
            
          

Når du kombinerer flere betingelser, blir syntaksen:

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

            

              
                Copy
              
            
          

Viktigste beste praksis:

• Prioriter lesbarhet: Selv om @when kan gjøre stiler mer konsise, unngå altfor komplekse nestede betingelser som kan bli vanskelige å tyde. Del opp kompleks logikk i separate regler om nødvendig.
• Progressiv forbedring: Sørg alltid for en smidig reserve (fallback) for nettlesere eller miljøer som ikke støtter funksjonene målrettet av dine @when-regler, spesielt når de brukes med @supports.
• Ytelse: Selv om @when i seg selv generelt er effektiv, vær oppmerksom på altfor kompleks betinget logikk som kan påvirke parsing-ytelsen, selv om dette sjelden er et problem ved typisk bruk.
• Nettleserstøtte: Hold øye med nettleserstøtten for @when og dens tilhørende at-regler. Siden introduksjonen har utbredelsen økt, men det er viktig å teste på tvers av dine målgruppenettlesere. Bruk verktøy som Can I Use for å sjekke den nyeste kompatibilitetsinformasjonen.
• Global rekkevidde: Når du designer for et globalt publikum, bruk @when med @media for å imøtekomme det store utvalget av enhetsstørrelser og oppløsninger som er utbredt over hele verden. Vurder også ulike nettverksforhold; du kan bruke prefers-reduced-motion media-spørringer innenfor @when for å deaktivere animasjoner for brukere som har valgt dette bort.
• Vedlikeholdbarhet: Bruk @when for å holde relaterte stiler samlet. Hvis en egenskaps verdi endres basert på en betingelse, er det ofte mer vedlikeholdbart å ha både standardverdien og den betingede verdien innenfor samme regelblokk, i stedet for å spre dem over forskjellige @media-spørringer.

Nettleserstøtte og fremtidsutsikter

@when at-regelen er et relativt nytt tillegg til CSS-landskapet. Ved sin første utbredte adopsjon støttes den i moderne nettlesere som Chrome, Firefox, Safari og Edge. Det er imidlertid avgjørende å alltid sjekke de nyeste dataene for nettleserkompatibilitet for spesifikke versjoner og funksjoner.

W3C CSS Working Group fortsetter å forbedre og utvide CSS-mulighetene. Funksjoner som @when, sammen med andre betingede regler og nesting, signaliserer en bevegelse mot mer programmatiske og uttrykksfulle stylingmuligheter i CSS. Denne trenden er avgjørende for å bygge komplekse, adaptive og brukervennlige nettopplevelser som imøtekommer en mangfoldig global brukerbase.

Ettersom webdesign fortsetter å omfavne tilpasningsevne og personalisering, vil @when bli et uunnværlig verktøy i utviklerens arsenal. Evnen til å finjustere stiler basert på et bredt spekter av betingelser, fra enhetsegenskaper til nettleserfunksjoner, gir oss muligheten til å skape mer sofistikerte og kontekstbevisste grensesnitt.

Konklusjon

CSS @when er en kraftig og elegant funksjon som betydelig forbedrer vår evne til å skrive betingede stiler. Ved å utnytte synergien med @media og @supports, kan utviklere skape mer responsive, adaptive og robuste webdesign. Enten du justerer typografi for forskjellige skjermstørrelser, betinget anvender avanserte CSS-funksjoner eller bygger komplekse interaktive brukergrensesnitt, gir @when den presisjonen og fleksibiliteten som trengs for å møte kravene til moderne webutvikling. Å omfavne denne funksjonen vil utvilsomt føre til mer sofistikerte og brukersentrerte digitale opplevelser for et globalt publikum.

Begynn å eksperimentere med @when i prosjektene dine i dag for å bygge smartere, mer adaptive og fremtidssikre nettsteder.