Pravidlo CSS @when: Majstrovstvo podmieneného použitia štýlov

Svet CSS sa neustále vyvíja a ponúka vývojárom výkonnejšie a flexibilnejšie spôsoby štýlovania webových stránok. Jednou z takýchto funkcií, ktorá si získava popularitu, je pravidlo @when, známe aj ako CSS Conditional Rules Module Level 1. Toto pravidlo vám umožňuje aplikovať CSS štýly podmienene, na základe splnenia špecifických podmienok. Je to výkonný nástroj pre responzívny dizajn, detekciu funkcií a vytváranie robustnejších a prispôsobivejších štýlov.

Čo je pravidlo CSS @when?

Pravidlo @when je podmienené at-pravidlo v CSS, ktoré vám umožňuje definovať štýly, ktoré sa aplikujú iba v prípade, že sú splnené určité podmienky. Predstavte si to ako if príkaz pre váš CSS. Na rozdiel od mediálnych dopytov, ktoré sa primárne zameriavajú na charakteristiky viewportu (veľkosť obrazovky, orientácia atď.), @when poskytuje všeobecnejší a rozšíriteľnejší spôsob spracovania podmieneného štýlovania. Rozširuje existujúce podmienené at-pravidlá, ako sú @supports a @media.

Kľúčové výhody používania @when

Zlepšená čitateľnosť kódu: Zapúzdrením podmienenej logiky do blokov @when robíte svoj CSS ľahšie pochopiteľným a udržiavateľným. Zámer za konkrétnymi aplikáciami štýlov je jasnejší.
Zvýšená flexibilita: @when dokáže zvládnuť zložitejšie podmienky ako tradičné mediálne dopyty, najmä v kombinácii s dopytmi po funkciách a logikou riadenou JavaScriptom (pomocou CSS Custom Properties).
Zjednodušená detekcia funkcií: @when sa bezproblémovo integruje s @supports, čo vám umožňuje aplikovať štýly iba vtedy, keď sú k dispozícii špecifické funkcie prehliadača. To je kľúčové pre progresívne vylepšenie.
Sémantickejšie štýlovanie: @when vám umožňuje štýlovať prvky na základe ich stavu alebo kontextu, čo vedie k sémantickejšiemu a ľahšie udržiavateľnému CSS. Napríklad štýlovanie prvkov na základe dátových atribútov alebo vlastných vlastností nastavených JavaScriptom.

Syntax pravidla @when

Základná syntax pravidla @when je nasledovná:

@when <podmienka> {
  /* Pravidlá CSS na aplikovanie, keď je podmienka pravdivá */
}

<podmienka> môže byť akýkoľvek platný booleovský výraz, ktorý sa vyhodnotí ako pravda alebo nepravda. Tento výraz často zahŕňa:

Mediálne dopyty: Podmienky založené na charakteristikách viewportu (napr. šírka obrazovky, orientácia zariadenia).
Dopyty po funkciách (@supports): Podmienky založené na podpore prehliadača pre špecifické CSS funkcie.
Booleovská algebra: Kombinovanie viacerých podmienok pomocou logických operátorov (and, or, not).

Praktické príklady @when v akcii

Pozrime sa na niektoré praktické príklady, ktoré ilustrujú silu a všestrannosť pravidla @when.

1. Responzívny dizajn s @when a mediálnymi dopytmi

Najbežnejším prípadom použitia @when je responzívny dizajn, kde upravujete štýly na základe veľkosti obrazovky. Aj keď mediálne dopyty to dokážu samy o sebe, @when poskytuje štrukturovanejší a čitateľnejší prístup, najmä pri práci so zložitými podmienkami.

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

V tomto príklade sa štýly v bloku @when aplikujú iba vtedy, keď je šírka obrazovky medzi 768px a 1023px (typická veľkosť tabletu). To poskytuje jasný a stručný spôsob definovania štýlov pre špecifické rozsahy viewportov.

Poznámka k internacionalizácii: Responzívny dizajn je kritický pre globálne publikum. Zvážte meniace sa veľkosti obrazoviek v rôznych regiónoch. Napríklad mobilné používanie je v niektorých krajinách vyššie, čo robí mobilný dizajn ešte dôležitejším.

2. Detekcia funkcií s @when a @supports

@when možno skombinovať s @supports na aplikovanie štýlov iba vtedy, keď prehliadač podporuje konkrétnu CSS funkciu. To vám umožňuje progresívne vylepšovať vašu webovú stránku, poskytovať lepšie skúsenosti používateľom s modernými prehliadačmi a zároveň zachovať kompatibilitu so staršími.

@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 {
    /* Záložné štýly pre prehliadače, ktoré nepodporujú grid */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Upraviť šírku pre staršie prehliadače */
  }
}

Tu používame @supports na kontrolu, či prehliadač podporuje CSS Grid Layout. Ak áno, aplikujeme štýly založené na mriežke na .container. Ak nie, poskytujeme záložné štýly pomocou flexboxu, aby sme zabezpečili podobné rozloženie v starších prehliadačoch.

Globálna poznámka k prístupnosti: Detekcia funkcií je dôležitá pre prístupnosť. Staršie prehliadače nemusia podporovať novšie ARIA atribúty alebo sémantické HTML5 prvky. Poskytnite vhodné zálohy, aby obsah zostal prístupný.

3. Kombinovanie mediálnych dopytov a dopytov po funkciách

Skutočná sila @when spočíva v jeho schopnosti kombinovať mediálne dopyty a dopyty po funkciách na vytváranie zložitejších a jemnejších pravidiel podmieneného štýlovania.

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

V tomto príklade sa prvok .modal bude rozmazávať iba vtedy, keď je šírka obrazovky najmenej 768px a prehliadač podporuje vlastnosť backdrop-filter. To vám umožňuje vytvárať vizuálne príťažlivé efekty v moderných prehliadačoch a zároveň sa vyhnúť možným problémom s výkonom alebo chybám vykresľovania v starších.

4. Štýlovanie založené na vlastných vlastnostiach (CSS premenné)

@when možno použiť aj v spojení s CSS Custom Properties (tiež známe ako CSS premenné) na vytváranie dynamických štýlov založených na stave. Môžete použiť JavaScript na aktualizáciu hodnoty vlastnej vlastnosti a potom použiť @when na aplikovanie rôznych štýlov na základe tejto hodnoty.

Najprv definujte vlastnú vlastnosť:

:root {
  --theme-color: #007bff; /* Predvolená farba témy */
  --is-dark-mode: false;
}

Potom použite @when na aplikovanie štýlov na základe hodnoty vlastnej vlastnosti:

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

Nakoniec použite JavaScript na prepínanie hodnoty vlastnej vlastnosti --is-dark-mode:

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

To umožňuje používateľom prepínať medzi svetlými a tmavými témami, pričom CSS sa dynamicky aktualizuje na základe hodnoty vlastnej vlastnosti. Všimnite si, že priame porovnávanie CSS premenných v `@when` nemusí byť univerzálne podporované vo všetkých prehliadačoch. Namiesto toho možno budete potrebovať riešenie s mediálnym dopytom, ktorý kontroluje nenulovú hodnotu:

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

Avšak, aby to správne fungovalo, uistite sa, že vlastná vlastnosť má numerickú hodnotu.

Poznámka k prístupnosti: Poskytovanie alternatívnych tém (napr. tmavý režim) je kľúčové pre prístupnosť. Používatelia so zrakovým postihnutím môžu mať prospech z tém s vysokým kontrastom. Uistite sa, že váš prepínač tém je prístupný prostredníctvom klávesnice a čítačiek obrazovky.

5. Štýlovanie založené na dátových atribútoch

@when môžete použiť aj s dátovými atribútmi na štýlovanie prvkov na základe ich dátových hodnôt. To môže byť užitočné pri vytváraní dynamických rozhraní, kde sa prvky menia vzhľadom na interakciu používateľa alebo aktualizácie dát.

Napríklad, povedzme, že máte zoznam úloh a každá úloha má dátový atribút data-status, ktorý indikuje jej stav (napr. "todo", "in-progress", "completed"). Môžete použiť @when na odlišné štýlovanie každej úlohy na základe jej stavu.

[data-status="todo"] {
  /* Predvolené štýly pre todo úlohy */
  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;
  }
}

Poznámka: podpora pre testovacie podmienky pomocou attribute() môže byť obmedzená alebo zatiaľ nie plne implementovaná vo všetkých prehliadačoch. Vždy dôkladne testujte.

Kompatibilita prehliadačov a polyfily

Koncom roka 2024 je podpora prehliadačov pre pravidlo @when stále vo vývoji. Aj keď mnohé moderné prehliadače podporujú základnú funkčnosť, niektoré staršie prehliadače to nemusia. Preto je kľúčové kontrolovať tabuľky kompatibility a používať vhodné zálohy alebo polyfily tam, kde je to potrebné.

Vždy sa obráťte na zdroje ako Can I use..., aby ste skontrolovali aktuálny stav podpory @when a súvisiacich funkcií v prehliadačoch.

Najlepšie postupy pri používaní @when

Udržujte podmienky jednoduché: Vyhnite sa príliš zložitým podmienkam v blokoch @when. Rozdeľte zložité logiky na menšie, ľahšie zvládnuteľné časti.
Poskytnite zálohy: Vždy poskytnite záložné štýly pre prehliadače, ktoré nepodporujú funkcie, ktoré používate vo svojich pravidlách @when. Tým sa zabezpečí konzistentný zážitok naprieč rôznymi prehliadačmi.
Dôkladne testujte: Otestujte svoj CSS v rôznych prehliadačoch a zariadeniach, aby ste sa uistili, že vaše pravidlá @when fungujú podľa očakávania.
Používajte zmysluplné komentáre: Pridajte komentáre k svojmu CSS, aby ste vysvetlili účel každého pravidla @when a podmienky, na ktorých je založené. To uľahčí pochopenie a údržbu vášho kódu.
Zvážte výkon: Vyhnite sa nadmernému používaniu pravidiel @when, pretože môžu potenciálne ovplyvniť výkon. Optimalizujte svoj CSS, aby ste minimalizovali počet pravidiel, ktoré je potrebné vyhodnotiť.

Záver

Pravidlo @when je silným doplnkom nástrojov CSS, ktoré vývojárom ponúkajú flexibilnejší a expresívnejší spôsob podmieneného aplikovania štýlov. Kombináciou s mediálnymi dopytmi, dopytmi po funkciách a CSS Custom Properties môžete vytvárať robustnejšie, prispôsobivejšie a ľahšie udržiavateľné štýly. Aj keď sa podpora prehliadačov stále vyvíja, @when je funkcia, ktorú sa oplatí preskúmať a začleniť do vášho moderného pracovného postupu vývoja webu.

Ako sa web neustále vyvíja, zvládnutie funkcií ako @when bude nevyhnutné pre vytváranie pútavých, prístupných a výkonných zážitkov pre používateľov po celom svete. Prijmite silu podmieneného štýlovania a odomknite nové možnosti vo svojom CSS vývoji.