M

MLOG

Čeština

Prozkoumejte pravidlo CSS @when, mocnou funkci pro podmíněnou aplikaci stylů na základě podpory prohlížeče, velikosti viewportu a dalších. Učte se s praktickými ukázkami.

Pravidlo CSS @when: Ovládněte podmíněnou aplikaci stylů

Svět CSS se neustále vyvíjí a nabízí vývojářům stále výkonnější a flexibilnější způsoby stylování webových stránek. Jednou z takových funkcí, která si získává na popularitě, je pravidlo @when, známé také jako CSS Conditional Rules Module Level 1. Toto pravidlo umožňuje aplikovat styly CSS podmíněně, na základě splnění specifických podmínek. Je to mocný nástroj pro responzivní design, detekci funkcí a tvorbu robustnějších a přizpůsobivějších stylopisů.

Co je pravidlo CSS @when?

Pravidlo @when je podmíněné at-pravidlo v CSS, které umožňuje definovat styly, jež se aplikují pouze v případě, že jsou splněny určité podmínky. Představte si ho jako příkaz if pro vaše CSS. Na rozdíl od mediálních dotazů (media queries), které se primárně zaměřují na vlastnosti viewportu (velikost obrazovky, orientace atd.), @when poskytuje obecnější a rozšiřitelnější způsob pro řešení podmíněného stylování. Rozšiřuje stávající podmíněná at-pravidla jako @supports a @media.

Klíčové výhody použití @when

Syntaxe pravidla @when

Základní syntaxe pravidla @when je následující: 
@when <condition> {
  /* Pravidla CSS, která se aplikují, když je podmínka splněna */
}

<condition> může být jakýkoli platný booleovský výraz, který se vyhodnotí jako pravda (true) nebo nepravda (false). Tento výraz často zahrnuje:

Praktické příklady @when v akci

Prozkoumejme několik praktických příkladů, které ilustrují sílu a všestrannost pravidla @when.

1. Responzivní design s @when a mediálními dotazy

Nejčastějším případem použití @when je responzivní design, kde upravujete styly na základě velikosti obrazovky. Ačkoli toho lze dosáhnout i samotnými mediálními dotazy, @when poskytuje strukturovanější a čitelnější přístup, zejména při práci se složitějšími podmínkami.

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

V tomto příkladu se styly v bloku @when aplikují pouze tehdy, když je šířka obrazovky mezi 768px a 1023px (typická velikost tabletu). To poskytuje jasný a stručný způsob, jak definovat styly pro specifické rozsahy viewportu.

Poznámka k internacionalizaci: Responzivní design je klíčový pro globální publikum. Zvažte různé velikosti obrazovek v různých regionech. Například v některých zemích je využití mobilních zařízení vyšší, což činí přístup „mobile-first“ ještě důležitějším.

2. Detekce funkcí s @when a @supports

Pravidlo @when lze kombinovat s @supports pro aplikaci stylů pouze v případě, že prohlížeč podporuje konkrétní funkci CSS. To vám umožní progresivně vylepšovat vaše webové stránky, poskytovat lepší zážitek uživatelům s moderními prohlížeči a zároveň zachovat kompatibilitu se 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í styly pro prohlížeče, které nepodporují grid */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Úprava šířky pro starší prohlížeče */
  }
}

Zde používáme @supports ke kontrole, zda prohlížeč podporuje CSS Grid Layout. Pokud ano, aplikujeme na .container styly založené na gridu. Pokud ne, poskytneme záložní styly pomocí flexboxu, abychom zajistili dosažení podobného rozvržení ve starších prohlížečích.

Poznámka ke globální přístupnosti: Detekce funkcí je důležitá pro přístupnost. Starší prohlížeče nemusí podporovat novější atributy ARIA nebo sémantické prvky HTML5. Poskytněte vhodné záložní řešení (fallbacks), abyste zajistili, že obsah zůstane přístupný.

3. Kombinace mediálních dotazů a dotazů na funkce

Skutečná síla @when spočívá v jeho schopnosti kombinovat mediální dotazy a dotazy na funkce pro vytváření složitějších a jemnějších pravidel pro podmíněné stylování.

@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 příkladu bude mít prvek .modal rozmazané pozadí pouze tehdy, když je šířka obrazovky alespoň 768px a zároveň prohlížeč podporuje vlastnost backdrop-filter. To vám umožní vytvářet vizuálně atraktivní efekty v moderních prohlížečích a zároveň se vyhnout potenciálním problémům s výkonem nebo vykreslováním v těch starších.

4. Stylování na základě vlastních vlastností (CSS proměnných)

Pravidlo @when lze také použít ve spojení s vlastními vlastnostmi CSS (známými také jako CSS proměnné) k vytváření dynamického a stavového stylování. Pomocí JavaScriptu můžete aktualizovat hodnotu vlastní vlastnosti a poté pomocí @when aplikovat různé styly na základě této hodnoty.

Nejprve definujte vlastní vlastnost:

:root {
  --theme-color: #007bff; /* Výchozí barva motivu */
  --is-dark-mode: false;
}

Poté použijte @when k aplikaci stylů na základě hodnoty vlastní vlastnosti:

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

Nakonec použijte JavaScript k přepínání hodnoty vlastní vlastnosti --is-dark-mode:

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

To umožňuje uživatelům přepínat mezi světlým a tmavým motivem, přičemž CSS se dynamicky aktualizuje na základě hodnoty vlastní vlastnosti. Všimněte si, že přímé porovnávání CSS proměnných v @when nemusí být univerzálně podporováno ve všech prohlížečích. Místo toho možná budete muset použít náhradní řešení s mediálním dotazem, který kontroluje nenulovou hodnotu: 

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

Ujistěte se však, že vlastní vlastnost má pro správnou funkci číselnou hodnotu.

Poznámka k přístupnosti: Poskytování alternativních motivů (např. tmavého režimu) je klíčové pro přístupnost. Uživatelé se zrakovým postižením mohou těžit z motivů s vysokým kontrastem. Zajistěte, aby byl váš přepínač motivů přístupný pomocí klávesnice a čteček obrazovky.

5. Stylování na základě datových atributů

Můžete také použít @when s datovými atributy ke stylování prvků na základě jejich datových hodnot. To může být užitečné pro vytváření dynamických rozhraní, kde prvky mění vzhled na základě interakce uživatele nebo aktualizací dat.

Řekněme například, že máte seznam úkolů a každý úkol má atribut data-status, který udává jeho stav (např. „todo“, „in-progress“, „completed“). Pomocí @when můžete každý úkol nastylovat odlišně podle jeho stavu.

[data-status="todo"] {
  /* Výchozí styly pro úkoly todo */
  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 pro testovací podmínku attribute() může být v současnosti omezená nebo ne plně implementovaná ve všech prohlížečích. Vždy důkladně testujte.

Kompatibilita s prohlížeči a polyfilly

Koncem roku 2024 je podpora pravidla @when v prohlížečích stále ve vývoji. Zatímco mnoho moderních prohlížečů podporuje základní funkcionalitu, některé starší prohlížeče ji nemusí podporovat. Proto je klíčové kontrolovat tabulky kompatibility a v případě potřeby používat vhodné záložní řešení (fallbacks) nebo polyfilly.

Aktuální stav podpory pravidla @when a souvisejících funkcí si vždy ověřte na zdrojích, jako je Can I use....

Nejlepší postupy pro používání @when

Závěr

Pravidlo @when je mocným doplňkem do sady nástrojů CSS a nabízí vývojářům flexibilnější a expresivnější způsob, jak podmíněně aplikovat styly. Kombinací s mediálními dotazy, dotazy na funkce a vlastními vlastnostmi CSS můžete vytvářet robustnější, přizpůsobivější a udržovatelnější stylopisy. Ačkoli se podpora v prohlížečích stále vyvíjí, @when je funkce, kterou stojí za to prozkoumat a začlenit do vašeho moderního pracovního postupu při vývoji webu.

Jak se web neustále vyvíjí, zvládnutí funkcí, jako je @when, bude nezbytné pro vytváření poutavých, přístupných a výkonných zážitků pro uživatele po celém světě. Využijte sílu podmíněného stylování a odemkněte nové možnosti ve svém vývoji CSS.