CSS pravilo @when: Ovladavanje uvjetnom primjenom stilova

Svijet CSS-a neprestano se razvija, nudeći programerima moćnije i fleksibilnije načine za stiliziranje web stranica. Jedna od takvih značajki koja dobiva na popularnosti je pravilo @when, poznato i kao CSS Conditional Rules Module Level 1. Ovo pravilo omogućuje uvjetnu primjenu CSS stilova na temelju ispunjenja određenih uvjeta. To je moćan alat za responzivni dizajn, detekciju značajki i stvaranje robusnijih i prilagodljivijih stilskih datoteka.

Što je CSS pravilo @when?

Pravilo @when je uvjetno at-pravilo u CSS-u koje vam omogućuje definiranje stilova koji se primjenjuju samo ako su određeni uvjeti istiniti. Zamislite ga kao if naredbu za vaš CSS. Za razliku od medijskih upita (media queries), koji se prvenstveno fokusiraju na karakteristike prikaza (veličina zaslona, orijentacija itd.), @when pruža općenitiji i proširiviji način za rukovanje uvjetnim stiliziranjem. Proširuje postojeća uvjetna at-pravila poput @supports i @media.

Ključne prednosti korištenja @when

Poboljšana čitljivost koda: Enkapsuliranjem uvjetne logike unutar @when blokova, vaš CSS postaje lakši za razumijevanje i održavanje. Namjera iza specifičnih primjena stilova postaje jasnija.
Povećana fleksibilnost: @when može rukovati složenijim uvjetima od tradicionalnih medijskih upita, posebno u kombinaciji s upitima o značajkama i logikom vođenom JavaScriptom (koristeći CSS prilagođena svojstva).
Pojednostavljeno otkrivanje značajki: @when se besprijekorno integrira s @supports, omogućujući vam primjenu stilova samo kada su dostupne određene značajke preglednika. Ovo je ključno za progresivno poboljšanje (progressive enhancement).
Semantičnije stiliziranje: @when vam omogućuje stiliziranje elemenata na temelju njihovog stanja ili konteksta, što dovodi do semantičnijeg i održivijeg CSS-a. Na primjer, stiliziranje elemenata na temelju data atributa ili prilagođenih svojstava postavljenih JavaScriptom.

Sintaksa pravila @when

Osnovna sintaksa pravila @when je sljedeća:

@when <uvjet> {
  /* CSS pravila koja se primjenjuju kada je uvjet istinit */
}

<uvjet> može biti bilo koji valjani booleov izraz koji se evaluira kao točan ili netočan. Ovaj izraz često uključuje:

Medijski upiti (Media Queries): Uvjeti temeljeni na karakteristikama prikaza (npr. širina zaslona, orijentacija uređaja).
Upiti o značajkama (@supports): Uvjeti temeljeni na podršci preglednika za određene CSS značajke.
Booleova algebra: Kombiniranje više uvjeta pomoću logičkih operatora (and, or, not).

Praktični primjeri @when u akciji

Istražimo neke praktične primjere kako bismo ilustrirali snagu i svestranost pravila @when.

1. Responzivni dizajn s @when i medijskim upitima

Najčešći slučaj upotrebe za @when je responzivni dizajn, gdje prilagođavate stilove na temelju veličine zaslona. Iako se to može postići samo s medijskim upitima, @when pruža strukturiraniji i čitljiviji pristup, posebno kada se radi o složenim uvjetima.

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

U ovom primjeru, stilovi unutar @when bloka primjenjuju se samo kada je širina zaslona između 768px i 1023px (tipična veličina tableta). Ovo pruža jasan i sažet način za definiranje stilova za određene raspone prikaza.

Napomena o internacionalizaciji: Responzivni dizajn je ključan za globalnu publiku. Uzmite u obzir različite veličine zaslona u različitim regijama. Na primjer, upotreba mobilnih uređaja veća je u nekim zemljama, što dizajn usmjeren na mobilne uređaje (mobile-first) čini još važnijim.

2. Otkrivanje značajki s @when i @supports

@when se može kombinirati s @supports kako bi se primijenili stilovi samo kada preglednik podržava određenu CSS značajku. To vam omogućuje progresivno poboljšanje vaše web stranice, pružajući bolje iskustvo korisnicima s modernim preglednicima, a istovremeno održavajući kompatibilnost sa starijima.

@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 {
    /* Zamjenski stilovi za preglednike koji ne podržavaju grid */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Prilagodite širinu za starije preglednike */
  }
}

Ovdje koristimo @supports kako bismo provjerili podržava li preglednik CSS Grid Layout. Ako podržava, primjenjujemo stilove temeljene na gridu na .container. Ako ne, pružamo zamjenske stilove koristeći flexbox kako bismo osigurali sličan raspored u starijim preglednicima.

Napomena o globalnoj pristupačnosti: Otkrivanje značajki važno je za pristupačnost. Stariji preglednici možda nemaju podršku za novije ARIA atribute ili semantičke HTML5 elemente. Osigurajte odgovarajuće zamjenske opcije kako bi sadržaj ostao pristupačan.

3. Kombiniranje medijskih upita i upita o značajkama

Prava snaga @when dolazi iz njegove sposobnosti kombiniranja medijskih upita i upita o značajkama kako bi se stvorila složenija i nijansiranija pravila za uvjetno stiliziranje.

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

U ovom primjeru, .modal element će imati zamućenu pozadinu samo kada je širina zaslona najmanje 768px i kada preglednik podržava svojstvo backdrop-filter. To vam omogućuje stvaranje vizualno privlačnih efekata na modernim preglednicima, izbjegavajući potencijalne probleme s performansama ili greške u prikazu na starijima.

4. Stiliziranje temeljeno na prilagođenim svojstvima (CSS varijable)

@when se također može koristiti u kombinaciji s CSS prilagođenim svojstvima (poznatim i kao CSS varijable) za stvaranje dinamičkog stiliziranja vođenog stanjem. Možete koristiti JavaScript za ažuriranje vrijednosti prilagođenog svojstva, a zatim koristiti @when za primjenu različitih stilova na temelju te vrijednosti.

Prvo, definirajte prilagođeno svojstvo:

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

Zatim, koristite @when za primjenu stilova na temelju vrijednosti prilagođenog svojstva:

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

Na kraju, koristite JavaScript za prebacivanje vrijednosti --is-dark-mode prilagođenog svojstva:

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

Ovo omogućuje korisnicima prebacivanje između svijetle i tamne teme, pri čemu se CSS dinamički ažurira na temelju vrijednosti prilagođenog svojstva. Imajte na umu da izravna usporedba CSS varijabli u `@when` možda nije univerzalno podržana u svim preglednicima. Umjesto toga, možda ćete trebati koristiti zaobilazno rješenje s medijskim upitom koji provjerava vrijednost različitu od nule:

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

Međutim, osigurajte da prilagođeno svojstvo ima numeričku vrijednost kako bi ovo funkcioniralo ispravno.

Napomena o pristupačnosti: Pružanje alternativnih tema (npr. tamni način rada) ključno je za pristupačnost. Korisnicima s oštećenjem vida mogu koristiti teme s visokim kontrastom. Osigurajte da je vaš prekidač za teme dostupan putem tipkovnice i čitača zaslona.

5. Stiliziranje temeljeno na data atributima

Također možete koristiti @when s data atributima za stiliziranje elemenata na temelju njihovih podatkovnih vrijednosti. To može biti korisno za stvaranje dinamičkih sučelja gdje elementi mijenjaju izgled na temelju interakcije korisnika ili ažuriranja podataka.

Na primjer, recimo da imate popis zadataka, a svaki zadatak ima data-status atribut koji označava njegov status (npr. "todo", "in-progress", "completed"). Možete koristiti @when za različito stiliziranje svakog zadatka na temelju njegovog statusa.

[data-status="todo"] {
  /* Zadani stilovi za zadatke koji se trebaju obaviti */
  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;
  }
}

Napomena: podrška za uvjet testiranja attribute() može biti ograničena ili još nije u potpunosti implementirana u svim preglednicima. Uvijek temeljito testirajte.

Kompatibilnost s preglednicima i Polyfills

Krajem 2024. godine, podrška preglednika za pravilo @when još se uvijek razvija. Dok mnogi moderni preglednici podržavaju osnovnu funkcionalnost, neki stariji preglednici možda ne. Stoga je ključno provjeriti tablice kompatibilnosti i koristiti odgovarajuće zamjenske opcije (fallbacks) ili polyfills gdje je to potrebno.

Uvijek provjerite resurse poput Can I use... kako biste provjerili trenutni status podrške preglednika za @when i povezane značajke.

Najbolje prakse za korištenje @when

Neka uvjeti budu jednostavni: Izbjegavajte previše složene uvjete unutar @when blokova. Razbijte složenu logiku na manje, upravljivije dijelove.
Osigurajte zamjenske stilove (fallbacks): Uvijek osigurajte zamjenske stilove za preglednike koji ne podržavaju značajke koje koristite u svojim @when pravilima. To osigurava dosljedno iskustvo na različitim preglednicima.
Temeljito testirajte: Testirajte svoj CSS na različitim preglednicima i uređajima kako biste osigurali da vaša @when pravila rade kako se očekuje.
Koristite smislene komentare: Dodajte komentare u svoj CSS kako biste objasnili svrhu svakog @when pravila i uvjete na kojima se temelji. To će vaš kod učiniti lakšim za razumijevanje i održavanje.
Uzmite u obzir performanse: Izbjegavajte prekomjernu upotrebu @when pravila, jer mogu potencijalno utjecati na performanse. Optimizirajte svoj CSS kako biste smanjili broj pravila koja se moraju evaluirati.

Zaključak

Pravilo @when moćan je dodatak CSS alatu, nudeći programerima fleksibilniji i izražajniji način za uvjetnu primjenu stilova. Kombinirajući ga s medijskim upitima, upitima o značajkama i CSS prilagođenim svojstvima, možete stvoriti robusnije, prilagodljivije i održivije stilske datoteke. Iako se podrška preglednika još uvijek razvija, @when je značajka koju vrijedi istražiti i uključiti u svoj moderni tijek rada u web razvoju.

Kako se web nastavlja razvijati, ovladavanje značajkama poput @when bit će ključno za stvaranje privlačnih, pristupačnih i učinkovitih iskustava za korisnike diljem svijeta. Prihvatite snagu uvjetnog stiliziranja i otključajte nove mogućnosti u svom CSS razvoju.