Příklad – Cyklická závislost

CSS proměnné se nechovají jako proměnné v programovacích jazycích. Tam mívají jejich hodnoty určitý vývoj a během činnosti programu se postupně mění. Běžně lze například zvětšit jejich hodnotu konstrukcí typu:

pocitadlo = pocitadlo + 1

Říká, že se má vzít aktuální hodnota proměnné pocitadlo, přičíst k ní 1 a následně uložit jako nová hodnota této proměnné. Tohle v CSS nefunguje. Pokud byste se pokusili při stanovení hodnoty CSS proměnné využít její aktuální hodnotu, vznikne tak zvaná cyklická závislost. Výsledkem je, že hodnota proměnné bude neplatná, tudíž nepoužitelná.

Ukažme si příklad: Chci mít blok, jehož pozadí bude mírně tmavší proti okolí. Když se tyto bloky budou vnořovat do sebe, barva pozadí bude tmavší a tmavší. Mohl bych se pokusit udělat to následujícím způsobem:

:root {
    --barva: #eee;
}

.tmavsi {
    --barva: hsl(from var(--barva) h s calc(l - 10));
    background-color: var(--barva);
}

Na úrovni kořenového prvku si definuji proměnnou --barva pro výchozí barvu pozadí těchto prvků. Ve třídě tmavsi, kterou pro ně používám, ji vždy o něco ztmavím.

Jenže to nefunguje. V definici barvy je cyklická závislost, takže se žádná hodnota nevypočítá a nastavení barvy pozadí je ignorováno:

Nefunguje ani nepřímý cyklus – že bych si zděděnou hodnotu proměnné --barva uložil do jiné proměnné a z ní pak vypočetl tmavší verzi. CSS si vytváří graf, co na čem závisí. Jakmile v něm najde cyklus, výpočet končí neúspěchem. Takže tohle také nic neřeší:

.tmavsi {
    --zdedeno: var(--barva);
    --barva: hsl(from var(--zdedeno) h s calc(l - 10));
    background-color: var(--barva);
}

Jak tedy dosáhnout kýženého výsledku? V tomto konkrétním případě bych jednoduše použil černé pozadí s velkou průhledností (např. #0002). Každé další vnořené by přidalo trochu černé a ve výsledku bylo o něco tmavší, než pozadí prvku pod ním:

Pokud by se ale nedal udělat takovýto krok stranou, nezbývá, než ručně určit stupeň změny v jednotlivých úrovních vnoření. Nějak takto:

.tmavsi {
    --ztmavit: 10;
    background-color: hsl(from var(--barva) h s calc(l - var(--ztmavit)));
}

.tmavsi .tmavsi {
    --ztmavit: 20;
}

.tmavsi .tmavsi .tmavsi {
    --ztmavit: 30;
}

Není to nic moc krásného, ale vytvořit hodnotu proměnné úpravou její zděděné hodnoty v CSS nelze, alespoň zatím.

zpět: CSS proměnné