O webu
Proměnné v CSS

Firefox 29 začal podporovat deklaraci a používání proměnných přímo v čistém CSS (bez CSS preprocesorů).

Použití

  1. 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.

  2. Při použití se jako hodnota CSS vlastnosti proměnná vyvolá.

    p {
      padding: var(promenna);
    }

    Ukázka

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");