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 - Co v calc() nejde - Attr() je na nic

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. Tedy formálně to jsou znaky mínus. Opravdu jsou ta mínuska dvě. Jednak na to zapomínám a jednak někdy v příkladech obě mínuska splývají

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().

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.

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.

Operátory

Jako operátory v calc() mi fungují + , - , / , * a mod (mod je modulo, tedy zbytek po dělení).

Spíš jsem měl napsat, že operátory jsou znaky + - / * , které jsou vždy na obou stranách obklopené mezerami (nebo koncem řádku). Takže tohle je špatně:

--soucet: calc( 1+1 )

naopak tohle je správně:

--soucet calc( 1 + 1)

Chybu způsobí už jen chybějící mezera.

Při násobení nesmějí být oba rozměry délkové. Při dělení nelze dělit délkovou jednotkou. (Na to existují workaroundy přes tan atan2 a bude to asi opraveno v Chrome 140 koncem roku 2025, ve Firefoxu asi o něco později.)

Výraz nesmí začínat operátorem, proto se záporné hodnoty píšou bez mezery za mínuskem.

Podpora

Podpora calc() je od Internet Exploreru 10, takže přibližně od poloviny roku 2016 to půjde používat bezpečně. Dříve se kvůli IE8 používal 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.

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().

Další funkce

Prohlížeče stále přidávají podporu dalších funkcí pro CSS. Hlavně jsou to goniometrické, transformační a zešikmovací funkce (hodí se jen u transformací) a běžné matematické funkce - ty se nabízejí pro použití přímo v calc. Na grafiku se hodí funkce pro výpočty barvy, gradientů a filtrů. Je toho prostě spousta a nedává smysl to všechno sledovat.

Co v calc() nejde

Nejde toho spousta. V budoucnu se možná něco opraví, ale teď (2025) mi vadí tohle:

Podmínkování podle proměnných nejde

Proměnné nelze použít v @media pravidlech, což je škoda.

Nejde násobit a dělit délkou

Hlavně to dělení je smutné. Dělit číslem je v pohodě:

p {width: calc(1800px / 2 );}

Ale nejde dělit délkovou jednotkou:

p {zoom: calc( 100vw / 1800px );}

Že nejde dělit délkovou jednotkou, je důležité, protože by to bylo potřeba často. Hlavně pro vlastnosti, které vyžadují bezrozměrné jednotky (jako např. v příkladu zmíněná vlastnost zoom). Částečné řešení jsou workaroundy přes tan atan2, což mi funguje, ale je to už trochu těžší na pochopení, protože se tam hackují chyby různých prohlížečů. Bude opraveno v Chrome 140 (CSS typed arighmetic).

Nejde používat klíčové hodnoty min-content, max-content a fit-content

Min-content a max-content jsou speciální hodnoty vhodné pro vlastnost width, které ukazují, jak moc lze objekt smrsknout nebo roztáhnout, aniž by skroloval. Tyhle hodnoty se ale nedají používat v calc(). V budoucnu, až přijde podpora, je bude možné používat v calc-size(). Tahle funkce calc-size() má ale zatím menší podporu než calc().

Nejde používat auto

V calc() naneštěstí nelze používat hodnotu auto, takže nelze operovat s vlastní velikostí prvků a upravovat rozměry prvků. Například prvků centrovaných pomocí margin:auto. To by také měla vyřešit funkce calc-size(), která ale zatím (2025) není dobře podporovaná.

Funkce Attr() je zatím na nic

Načtení html atributů omezené na content

V CSS sice existuje hodnota attr(), která umí načíst hodnotu atributu z HTML, ale je to jenom řetězec. Takže se nedá použít pro žádné výpočty a dá se použít jenom docela debilně ve vlastnosti content. Takže nic takovéhleho nefunguje:

img {width: calc( attr(width) * 2 ) }

Jediné, co jde s attr() udělat, je tedy připsat nějaký text na začátek nebo na konec:

p:after {content: " tohle má nastavenou třídu " attr(class);}

Takže attr() je dost na nic. Možná se to v nejbližších letech změní, je potřeba testovat.

Tento text byl původně součástí článku Délkové jednotky v CSS.

Aktualizováno 12. 5. 2024 a 1.6.2025