Firefox 29 začal podporovat deklaraci a používání proměnných přímo v čistém CSS (bez CSS preprocesorů).
Použití
-
Nejprve je potřeba proměnnou nadeklarovat:
body { var-promenna: 1em; }To se dělá klíčovým slovem
var, spojovníkem a samotným názvem. -
Při použití se jako hodnota CSS vlastnosti proměnná vyvolá.
p { padding: var(promenna); }
Vlastnosti CSS proměnných
Dědičnost
I proměnné se v CSS dědí. Aby u nějakého elementu šla proměnná vyvolat, musí být deklarována u rodiče. Pro proměnné platné napříč celým dokumentem se hodí použít selektor značky <html> (nebo :root).
Přebíjení proměnných
Podobně funguje i přebíjení. Hodnotu proměnné je možné libovolně přepisovat. Projeví se ale jen v potomcích elementu, který ji přepisuje.
Na následující ukázce proto bude v prohlížeči podporujícím proměnné prostřední odstavec modře orámován.
Nenastavená proměnná
V případě, že proměnná, kterou chceme pomocí var() vyvolat, neexistuje, je možné uvést fallback jako druhý argument této funkce:
p {
color: var(neexistuje, green);
}Pokud proměnná neexistuje nebude existovat, barva se nastaví na green.
Používání s dalšími CSS funkcemi
Proměnné je možné propojit třeba s funkcí calc() a rozměry počítat násobením nějaké základní hodnoty (ukázka).
:root {var-hodnota: 100px}
p {width: calc(var(hodnota) * 2)}Naopak používání calc() při deklarování proměnných, zdá se, zatím nefunguje.
CSS proměnné a JavaScript
S CSS proměnnými by mělo jít manipulovat pomocí JavaScriptu (style.var).
get-
Získat hodnotu proměnné u
elementu zařídí:element.style.var.get("promenna"); set-
Nastaví CSS proměnnou:
element.style.var.set("promenna", "hodnota"); has-
Zkontroluje, jestli má element proměnnou nastavenou:
if (element.style.var.has("promenna")) { // má proměnnou „promenna“ } delete-
Odstraní proměnnou s daným názvem.
element.style.var.delete("promenna");
Co si myslíte o tomto článku?
Diskuse
Související články
CSS item-pack: balance – vyvážené rozložení flex položek
Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.
CSS Container Queries – responsivní komponenty
Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.