Pravilo CSS @when: Obvladovanje pogojne uporabe slogov

Svet CSS se nenehno razvija in razvijalcem ponuja zmogljivejše in prilagodljivejše načine za oblikovanje spletnih strani. Ena takšnih funkcij, ki pridobiva na pomenu, je pravilo @when, znano tudi kot CSS Conditional Rules Module Level 1. To pravilo omogoča pogojno uporabo slogov CSS, na podlagi izpolnjenih specifičnih pogojev. Je zmogljivo orodje za odzivno oblikovanje, zaznavanje funkcij in ustvarjanje robustnejših ter prilagodljivejših slogovnih datotek.

Kaj je pravilo CSS @when?

Pravilo @when je pogojno at-pravilo v CSS-u, ki omogoča določanje slogov, ki se uporabijo le, če so določeni pogoji resnični. Predstavljajte si ga kot stavek if za vaš CSS. Za razliko od medijskih poizvedb, ki se osredotočajo predvsem na značilnosti vidnega polja (velikost zaslona, usmerjenost itd.), @when ponuja bolj splošen in razširljiv način obravnavanja pogojnega oblikovanja. Nadgrajuje obstoječa pogojna at-pravila, kot sta @supports in @media.

Ključne prednosti uporabe @when

Izboljšana berljivost kode: Z vključevanjem pogojne logike v bloke @when postane vaš CSS lažje razumljiv in vzdržljiv. Namen določenih aplikacij slogov postane jasnejši.
Izboljšana prilagodljivost: @when lahko obravnava bolj kompleksne pogoje kot tradicionalne medijske poizvedbe, še posebej v kombinaciji s poizvedbami o funkcijah in logiko, ki jo poganja JavaScript (z uporabo lastnosti po meri CSS).
Poenostavljeno zaznavanje funkcij: @when se brezhibno integrira z @supports, kar vam omogoča uporabo slogov le, ko so določene funkcije brskalnika na voljo. To je ključnega pomena za progresivno izboljšanje.
Bolj semantično oblikovanje: @when vam omogoča oblikovanje elementov na podlagi njihovega stanja ali konteksta, kar vodi do bolj semantičnega in vzdržljivega CSS-a. Na primer, oblikovanje elementov na podlagi podatkovnih atributov ali lastnosti po meri, nastavljenih z JavaScriptom.

Osnovna sintaksa pravila @when je naslednja:

@when <pogoj> {
  /* Pravila CSS za uporabo, ko je pogoj resničen */
}

<pogoj> je lahko kateri koli veljaven logični izraz, ki se ovrednoti kot resničen ali neresničen. Ta izraz pogosto vključuje:

Medijske poizvedbe: Pogoji, ki temeljijo na značilnostih vidnega polja (npr. širina zaslona, usmerjenost naprave).
Poizvedbe o funkcijah (@supports): Pogoji, ki temeljijo na podpori brskalnika za določene funkcije CSS.
Booleanova algebra: Združevanje več pogojev z uporabo logičnih operatorjev (and, or, not).

Praktični primeri @when v akciji

Raziščimo nekaj praktičnih primerov, da ponazorimo moč in vsestranskost pravila @when.

1. Odzivno oblikovanje z @when in medijskimi poizvedbami

Najpogostejša uporaba @when je odzivno oblikovanje, kjer sloge prilagodite glede na velikost zaslona. Medtem ko medijske poizvedbe to lahko dosežejo same, @when ponuja bolj strukturiran in berljiv pristop, še posebej pri obravnavanju kompleksnih pogojev.

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

V tem primeru se slogi znotraj bloka @when uporabijo samo, ko je širina zaslona med 768px in 1023px (tipična velikost tabličnega računalnika). To omogoča jasen in jedrnat način za določanje slogov za specifična območja vidnega polja.

Opomba o internacionalizaciji: Odzivno oblikovanje je ključnega pomena za globalno občinstvo. Upoštevajte različne velikosti zaslonov v različnih regijah. Na primer, uporaba mobilnih naprav je v nekaterih državah višja, zaradi česar je oblikovanje najprej za mobilne naprave še bolj ključno.

2. Zaznavanje funkcij z @when in @supports

@when se lahko kombinira z @supports za uporabo slogov samo, ko brskalnik podpira določeno funkcijo CSS. To vam omogoča postopno izboljšanje vaše spletne strani, kar zagotavlja boljšo izkušnjo za uporabnike s sodobnimi brskalniki, hkrati pa ohranja združljivost s starejšimi.

@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 {
    /* Nadomestni slogi za brskalnike, ki ne podpirajo mreže */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Prilagodite širino za starejše brskalnike */
  }
}

Tukaj uporabimo @supports za preverjanje, ali brskalnik podpira postavitev CSS Grid. Če jo, uporabimo sloge, ki temeljijo na mreži, za .container. Če ne, zagotovimo nadomestne sloge z uporabo flexboxa, da zagotovimo podobno postavitev v starejših brskalnikih.

Opomba o globalni dostopnosti: Zaznavanje funkcij je pomembno za dostopnost. Starejši brskalniki morda nimajo podpore za novejše atribute ARIA ali semantične elemente HTML5. Zagotovite ustrezne nadomestne rešitve, da zagotovite dostopnost vsebine.

3. Združevanje medijskih poizvedb in poizvedb o funkcijah

Resnična moč @when izvira iz njegove zmožnosti združevanja medijskih poizvedb in poizvedb o funkcijah za ustvarjanje kompleksnejših in niansiranih pravil pogojnega oblikovanja.

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

V tem primeru bo element .modal imel zamegljeno ozadje le, ko je širina zaslona vsaj 768px in brskalnik podpira lastnost backdrop-filter. To vam omogoča ustvarjanje vizualno privlačnih učinkov na sodobnih brskalnikih, hkrati pa se izognete morebitnim težavam z zmogljivostjo ali napakam pri upodabljanju na starejših.

4. Oblikovanje na podlagi lastnosti po meri (CSS spremenljivk)

@when se lahko uporablja tudi v povezavi z lastnostmi po meri CSS (znanimi tudi kot CSS spremenljivke) za ustvarjanje dinamičnega in na stanju temelječega oblikovanja. Z JavaScriptom lahko posodobite vrednost lastnosti po meri in nato uporabite @when za uporabo različnih slogov na podlagi te vrednosti.

Najprej določite lastnost po meri:

:root {
  --theme-color: #007bff; /* Privzeta barva teme */
  --is-dark-mode: false;
}

Nato uporabite @when za uporabo slogov na podlagi vrednosti lastnosti po meri:

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

Na koncu uporabite JavaScript za preklapljanje vrednosti lastnosti po meri --is-dark-mode:

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

To uporabnikom omogoča preklapljanje med svetlimi in temnimi temami, pri čemer se CSS dinamično posodablja na podlagi vrednosti lastnosti po meri. Upoštevajte, da neposredna primerjava spremenljivk CSS v `@when` morda ni univerzalno podprta v vseh brskalnikih. Namesto tega boste morda morali uporabiti rešitev z medijsko poizvedbo, ki preverja, ali vrednost ni nič:

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

Vendar pa se prepričajte, da ima lastnost po meri številčno vrednost, da bo to delovalo pravilno.

Opomba o dostopnosti: Zagotavljanje alternativnih tem (npr. temni način) je ključnega pomena za dostopnost. Uporabniki z okvarami vida lahko imajo koristi od tem z visokim kontrastom. Prepričajte se, da je vaše preklapljanje tem dostopno prek tipkovnice in bralnikov zaslona.

5. Oblikovanje na podlagi podatkovnih atributov

@when lahko uporabite tudi s podatkovnimi atributi za oblikovanje elementov na podlagi njihovih podatkovnih vrednosti. To je lahko uporabno za ustvarjanje dinamičnih vmesnikov, kjer elementi spreminjajo videz na podlagi uporabnikove interakcije ali posodobitev podatkov.

Na primer, recimo, da imate seznam opravil in vsako opravilo ima atribut data-status, ki označuje njegovo stanje (npr. "todo", "in-progress", "completed"). @when lahko uporabite za različno oblikovanje vsakega opravila glede na njegovo stanje.

[data-status=\"todo\"] {
  /* Privzeti slogi za opravila "za narediti" */
  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;
  }
}

Opomba: Podpora za pogoj testiranja attribute() je trenutno morda omejena ali ni v celoti implementirana v vseh brskalnikih. Vedno temeljito preverite.

Združljivost brskalnika in polifili

Konec leta 2024 se podpora brskalnikov za pravilo @when še vedno razvija. Medtem ko številni sodobni brskalniki podpirajo osnovno funkcionalnost, nekateri starejši morda ne. Zato je ključnega pomena preveriti tabele združljivosti in po potrebi uporabiti ustrezne nadomestne rešitve ali polifile.

Vedno se posvetujte z viri, kot je Can I use..., da preverite trenutno stanje podpore brskalnikov za @when in sorodne funkcije.

Najboljše prakse za uporabo @when

Naj bodo pogoji preprosti: Izogibajte se pretirano kompleksnim pogojem znotraj blokov @when. Razčlenite kompleksno logiko na manjše, bolj obvladljive dele.
Zagotovite nadomestne rešitve: Vedno zagotovite nadomestne sloge za brskalnike, ki ne podpirajo funkcij, ki jih uporabljate v pravilih @when. To zagotavlja dosledno izkušnjo v različnih brskalnikih.
Temeljito preizkusite: Preizkusite svoj CSS v različnih brskalnikih in napravah, da zagotovite, da vaša pravila @when delujejo, kot je pričakovano.
Uporabite smiselne komentarje: Dodajte komentarje v svoj CSS, da pojasnite namen vsakega pravila @when in pogoje, na katerih temelji. To bo olajšalo razumevanje in vzdrževanje vaše kode.
Upoštevajte zmogljivost: Izogibajte se pretirani uporabi pravil @when, saj lahko potencialno vplivajo na zmogljivost. Optimizirajte svoj CSS, da zmanjšate število pravil, ki jih je treba ovrednotiti.

Zaključek

Pravilo @when je zmogljiv dodatek k orodjem CSS, ki razvijalcem ponuja bolj prilagodljiv in izrazit način za pogojno uporabo slogov. Z združevanjem z medijskimi poizvedbami, poizvedbami o funkcijah in lastnostmi po meri CSS lahko ustvarite robustnejše, prilagodljivejše in vzdržljivejše slogovne datoteke. Medtem ko se podpora brskalnikov še razvija, je @when funkcija, ki jo je vredno raziskati in vključiti v vaš sodoben potek dela spletnega razvoja.

Ker se splet nenehno razvija, bo obvladovanje funkcij, kot je @when, ključnega pomena za ustvarjanje privlačnih, dostopnih in zmogljivih izkušenj za uporabnike po vsem svetu. Sprejmite moč pogojnega oblikovanja in odklenite nove možnosti v vašem razvoju CSS.