Proměnné var() a výpočty calc() v CSS
Ještě do roku 2018 se nedaly používat v CSS proměnné, protože je některé prohlížeče nepodporují. To je naštěstí už minulost a proměnné se použít dají.
Proměnné v CSS - Výpočty v CSS
Proměnné v CSS
Příklad na použití proměnné
html {
--pismo: 18px;
--barva: green;
}
p.prvni {
font-size: var(--pismo);
}
p.druhy{
color: var(--barva);
}
Zobrazte si příklad v prohlížeči.
Vysvětlení příkladu: v nějakém nadřazeném tagu (nejlépe asi HTML) definuju proměnné. Můžu je definovat v jiném tagu, ale já prostě používám HTML, protože to je v dokumentu vždy.
Proměnná se deklaruje zápisem začínajícím dvěma pomlčkami, například --pismo. Pojmenování proměnné je zcela na mě (rád na to používám česká slova, abych je odlišil od klíčových slov CSS.) Deklarace se zapisuje stejně jako CSS vlastnost, takže má za dvojtečkou hodnotu, tedy třeba --pismo: 18px;.
Když chci následně proměnnou použít, zapisuji ji s klíčovým slovem var(), čímž vyvolám její hodnotu. Takže třeba font-size: var(--pismo); je stejné, jako kdybych tam napsal hodnotu té proměnné.
Hodnoty proměnných nemusejí být jen čísla, ale třeba názvy barev, URL souborů apod. V příkladu je takhle použitý název barvy green.
Vícenásobné použití proměnné
Nejlepší je, že se hodnoty proměnných dají použít v CSS vícekrát. To je vlastně hlavní důvod, proč CSS proměnné vůbec použítat. Kdyby se proměnná použila jenom jednou, je možná lepší psát ji rovnou do kódu k vlastnosti.
Příklad:
html { -- kocka: 160px;}
...
p.kocici {width: var(--kocka);}
...
img.kocka {width: var(--kocka); height: auto;}
Možná si říkáte, že by se stejného efektu dosáhlo zápisem
p.kocici, img.kocka {width: 160px;}
V mnoha případech by to skutečně tak zapsat šlo, ale v některých situacích taky ne. Jednak vidíte, že bych ještě musel dát další řádek pro height: auto;, ale hlavně takhle tu proměnnou můžu použít ve složitějších situacích, jako je třeba násobné použití v různých @media oddílech. No a hlavně ve výpočtech calc().
Podmínkování podle proměnných nejde
Proměnné nelze použít v @media pravidlech, což je škoda.
Vypočtené hodnoty pomocí calc()
Místo jednotek lze používat jejich kombinace pomocí calc().
Příklad:
width: calc(90% - 2em);
znamená šířku, která je 90 procent bez dvou em.
Jako operátory mi fungují + , -, / , * a mod (mod je modulo, tedy zbytek po dělení). Výraz nesmí začínat operátorem, a proto se záporné hodnoty píšou bez mezery za mínuskem!
Určitě chápete, že calc() vypadá hodně užitečně. Například umožní odstranit některé matrjošky (zanořované divy). Může se hodit pro výpočet šířek buněk v tabulce, k přesnému umisťování pozadí a k přibližnému pozicování v pružném layoutu.
Podpora calc() je od Internet Exploreru 10, takže přibližně od poloviny roku 2016 to půjde používat bezpečně. Jsou-li pro vás důležití uživatelé IE 8, je dobré používat fallback:
width: 85%; /* pro starší prohlížeče */
width: calc(90% - 2em);
Starší prohlížeče interpretují calc() jako neznámou hodnotu a při trochu štěstí by ji měly ignorovat a použít předchozí hodnotu. Novější prohlížeče naproti tomu vezmou hodnotu z druhého řádku, protože je v kódu později.
V calc() naneštěstí nelze používat hodnotu auto, takže nelze operovat s vlastní velikostí prvků a upravovat rozměry prvků centrovaných pomocí margin:auto.
Funkce min(), max()
V CSS lze nastavit rozměry prvků podle toho, co je větší nebo menší. Například
width: min(40vw, 500px);
V tomto případě chci nastavit, aby prvek byl široký buďto 40vw, nebo 500px, podle toho, co z toho je menší.
Krom toho existuje ještě funkce clamp(), která je kombinací min() a max().
Tento text byl původně součástí článku Délkové jednotky v CSS.
Aktualizováno 12. 5. 2024
Reklama
