CSS proměnné (custom properties)

00:00:00

Představ si, že máš na webu zlatou barvu použitou na sto různých místech. Záhlaví, tlačítka, rámečky, zvýraznění – všude #daa520. Klient ti pak řekne: „Chtěl bych trochu teplejší zlatou.\" Bez CSS proměnných musíš změnit sto hodnot. S proměnnými změníš jednu – a změní se všechno najednou.

Co jsou CSS proměnné?

CSS proměnné (technicky se nazývají custom properties) jsou pojmenované hodnoty, které definuješ jednou a pak používáš kdekoliv v CSS. Název proměnné vždy začíná dvěma pomlčkami (--):

/* Definice proměnné */
:root {
  --barva-primerni: #daa520;
}

/* Použití proměnné – funkce var() */
.btn-gold {
  background-color: var(--barva-primerni);
}

h2 {
  color: var(--barva-primerni);
}

.border-accent {
  border-left: 4px solid var(--barva-primerni);
}

Selektor :root odpovídá kořenovému elementu HTML dokumentu – v praxi to je tag <html>. Proměnné definované v :root jsou dostupné kdekoliv na stránce.

Syntaxe a záchranné hodnoty

Funkce var() přijímá volitelný druhý parametr – záchrannou hodnotu, která se použije, pokud proměnná není definována:

.prvek {
  color: var(--barva-text, #222222);
  /* Pokud --barva-text není definována, použije se #222222 */
}

Záchranná hodnota může být i jiná proměnná:

color: var(--barva-nadpisu, var(--barva-primerni, #000));

Tmavý a světlý režim pomocí proměnných

CSS proměnné jsou ideální pro přepínání témat. Stačí definovat dvě sady hodnot – výchozí a alternativní – a přepnout třídu na <body>:

/* Výchozí hodnoty (tmavý režim) */
:root {
  --bg: #1a1a2e;
  --text: #e0e0e0;
  --akcent: #ff9500;
}

/* Světlý režim – přepíše hodnoty */
body.light-mode {
  --bg: #ffffff;
  --text: #222222;
  --akcent: #c47a00;
}

/* Pravidla zůstávají stejná pro oba režimy */
body {
  background-color: var(--bg);
  color: var(--text);
}

a, .btn-gold {
  color: var(--akcent);
}

JavaScript pak pouze přidá nebo odebere třídu light-mode na <body> – vše ostatní zařídí CSS automaticky. Přesně takto funguje přepínač tmavého/světlého režimu na tomto webu.

Lokální proměnné

Proměnné nemusí být definovány jen v :root. Lze je definovat na libovolném selektoru – pak platí jen pro daný element a jeho potomky:

.karta {
  --karta-bg: rgba(255, 255, 255, 0.05);
  --karta-radius: 16px;

  background: var(--karta-bg);
  border-radius: var(--karta-radius);
}

.karta--zvyraznena {
  --karta-bg: rgba(255, 149, 0, 0.1); /* přepíše jen pro tuto variantu */
}

Proměnné a JavaScript

CSS proměnné lze číst a měnit i JavaScriptem, což otevírá zajímavé možnosti – například dynamické přizpůsobení barev podle preferencí uživatele:

// Nastavení CSS proměnné přes JavaScript
document.documentElement.style.setProperty('--akcent', '#ff0000');

// Čtení hodnoty CSS proměnné
let akcent = getComputedStyle(document.documentElement)
               .getPropertyValue('--akcent')
               .trim();

Typický set proměnných pro web

Doporučená základní sada CSS proměnných pro nový projekt:

:root {
  /* Barvy */
  --barva-pozadi: #ffffff;
  --barva-text: #222222;
  --barva-akcent: #daa520;
  --barva-akcent-hover: #c47a00;
  --barva-border: rgba(0, 0, 0, 0.1);

  /* Typografie */
  --font-zakladni: Georgia, 'Times New Roman', serif;
  --font-kod: 'Courier New', Courier, monospace;
  --velikost-zakladni: 1rem;
  --vyska-radku: 1.7;

  /* Rozměry a mezery */
  --radius-maly: 8px;
  --radius-velky: 20px;
  --padding-sekce: 2rem;
  --max-sirka: 900px;
}

Tip od Zdeňka

Zdeněk radí: CSS proměnné jsou jedna z věcí, které mi nejvíce usnadnily práci na webu. Celý master_26.css je postaven na sadě proměnných – barvy, velikosti, mezery. Když chci experimentovat s novou barvou, změním jednu hodnotu v :root a okamžitě vidím výsledek na celém webu. Přepínač tmavého a světlého režimu pak zvládne dva řádky JavaScriptu, protože CSS si přebarvení zařídí sám. Začni je používat od prvního projektu – časem si bez nich nedokážeš práci představit.