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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Počítání v CSS funkcí calc()

Počítání v CSS pomocí calc()

Od Exploreru 9 a mimo starou Operu 12 lze přímo v CSS provádět jednoduché výpočty využitím calc().

CSS toggle()

CSS funkce toggle()

Nefunguje zatím snad nikde, měla by sloužit k pohodlnému zadávání hodnot pro zanořené elementy stejného názvu.

Průhledné pozadí rgba()

Zápis průhledné barvy rgba()

Zadávání barev v CSS pomocí rgba() umožňuje vytvořit průhledné jednobarevné pozadí.

CSS gradient

Gradienty v CSS

Jak vytvořit barevný přechod (gradient) přímo v CSS bez použití obrázku.

CSS counter

CSS counter

Automatické číslování v CSS za pomocí counter-increment, counter-reset a counter.

Komentáře