Lekce 2 - Počítání v CSS3 pomocí funkce calc()

V předchozí lekci, Čítač a vlastnost content v CSS3, jsme si ukázali, jak vytvořit CSS3 čítač a využili jsme vlastnost content na několik způsobů.

Vítejte u další lekce ohledně funkcí v CSS3, ve které si ukážeme, jak funguje a na co se využívá funkce calc(). V této lekci se naučíme následující:

Funkce calc()

Tato funkce se hojně využívá při tvorbě moderních web stránek. Prohlížeč díky ní totiž jednoduše přepočítává rozměry jednotlivých elementů podle toho, v jak velkém okně stránku otevíráme. Kromě změny velikostí elementů se dá také použít při přepočtu úhlů, frekvence, nebo časových průběhů u animací. Funkce pracuje s čtyřmi základními operátory - Sčítání (+), odčítání (-), násobení (*) a dělení (/). Podíváme se tedy na to, jak ji v CSS zapsat. Vytvoříme si HTML dokument s naším obvyklým nastavením:

<div class="div1"></div>
<div class="div2"></div>

A také CSS soubor:

* {
 margin: 0;
 padding: 0;
 font-family: monospace;
}

body {
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 font-size: 20px;
}

Soubor CSS musíme také do HTML dokumentu nalinkovat:

<link rel="stylesheet" href="main.css" type="text/css">

Nyní nastavíme třídě .div1 pevnou velikost šířky 100px a výšky 100px. Odlišíme ji také červenou barvou:

.div1 {
 width: 100px;
 height: 100px;
 background-color: red;
}

Nakonec nastylujeme další třídu .div2, té ale nastavíme rozměry pomocí funkce calc() a dáme ji modrou barvu. Výška se pomocí procent dá nastavit pouze s určitým obsahem, uděláme to tedy pomocí jednotky vh s hodnotou 67:

.div2 {
 width: calc(10%);
 height: calc(67vh);
 background-color: blue;
}

Výsledek bude vypadat nějak takto:

Na první pohled se může zdát, že se vlastně nestalo nic neobvyklého. Stačilo by obyčejně nastavit šířce hodnotu 10% nebo 10vw. Zvláštnost této funkce ale začíná ve chvíli, kdy se zadá více, než jedna hodnota. Navíc je této funkci naprosto jedno, jaké jednotky mají zadané hodnoty, můžeme použít px, procenta, em, prostě cokoliv a to vše v rámci jedné funkce. Jediné, na co si musíme dávat pozor, je mezera mezi operátory a jednotlivými hodnotami. Pokud bychom to udělali bez mezer, tak funkce nebude fungovat:

• Takto ano: calc(80% - 30px);
• Takto ne: calc(80%- 30px); nebo calc(80% -30px);

V naší třídě .div2 změníme naši hodnotu 10% na výpočet, který se bude rovnat 10%:

.div2 {
 width: calc(2% + 3% + 5%);
 height: calc(67vh);
 background-color: blue;
}

Jak můžeme nyní vidět, celkový výsledek je stále 10%, šířka se tedy vůbec nezměnila:

Tato funkce se nejčastěji využívá u velkých projektů, kde se místo různých hodnot používají předem definované proměnné. Ukážeme si tedy jak to vypadá v praxi. Nejprve si definujeme proměnnou v rámci našeho CSS dokumentu, která poté bude na naší stránce obecně platit:

:root {
 --width1: 100px;
}

Dále přidáme našemu dokumentu ještě jednu třídu .div3. Nastavíme barvu pozadí na zelenou, výšku na 100px a šířku necháme vypočítat pomocí funkce calc(). Použijeme naši proměnnou --width1 a přidáme k ní hodnoty 2% a 3vw:

.div3 {
 background-color: green;
 min-height: 100px;
 width: calc(var(--width1) + 2% + 3vw);
}

Šířka se nám tedy automaticky dopočítá:

Nyní můžeme libovolně měnit naši proměnnou --width1, ale i když ji nastavíme hodnotu na 0px, stále bude element vidět, protože jeho šířka bude 2% + 3vw.

Další zajímavé využití si ukážeme na barvě posledního elementu. Místo pevně stanovené barvy green použijeme zápis rgb() a funkci calc(). Definujeme si novou proměnnou --color1 s hodnotou 127:

:root {
 --color1: 127;
}

Dále si v naší třídě .div3 změníme vlastnost background-color následujícím způsobem:

.div3 {
 width: calc(var(--width1) + 2% + 3vw);
 min-height: 100px;
 background-color: rgb(0, calc(255 - var(--color1)), 0);
}

Náš výsledek po provedení změn:

Takto bude nastavena barva na stejnou zelenou jako byla předtím, nyní ji ale lze jednoduše změnit pomocí naší proměnné. Samozřejmě bychom to takto mohli nastavit i bez této funkce, nicméně toto je pouze příklad, že funkci calc() lze použít prakticky všude, kde máme nějaká čísla. Nejčastěji se tato funkce potom používá při kombinaci s JavaScriptem, kdy nastavujeme změny elementů pomocí nějakých hodnot.

Pokud něčemu nerozumíte, doporučujeme stáhnout si soubory v příloze k této lekci a vše si pořádně vyzkoušet.

V následujícím kvízu, Kvíz - calc(), čítač a vlastnost content v CSS3, si vyzkoušíme nabyté zkušenosti z předchozích lekcí.