13. diel - Počítanie v CSS pomocou funkcie calc ()

V predchádzajúcej lekcii, Čítač a vlastnosť content v CSS 3 , sme si ukázali, ako vytvoriť CSS 3 čítač a využili sme vlastnosť content na niekoľko spôsobov.

Vitajte u ďalšej lekcie ohľadom funkcií v CSS 3, v ktorej si ukážeme, ako funguje a na čo sa využíva funkcie calc(). V tejto lekcii sa naučíme nasledujúce:

Funkcia calc()

Táto funkcia sa hojne využíva pri tvorbe moderných web stránok. Prehliadač vďaka nej totiž jednoducho prepočítava rozmery jednotlivých elementov podľa toho, v akom veľkom okne stránku otvárame. Okrem zmeny veľkostí elementov sa dá tiež použiť pri prepočte uhlov, frekvencia, alebo časových priebehov u animácií. Funkcia pracuje s štyrmi základnými operátormi - Sčítanie (+), odčítanie (-), násobenie (*) a delenie (/). Pozrieme sa teda na to, ako ju v CSS zapísať. Vytvoríme si HTML dokument s naším obvyklým nastavením:

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

A tiež CSS súbor:

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

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

Súbor CSS musíme tiež do HTML dokumentu nalinkovať:

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

Teraz nastavíme triede .div1 pevnú veľkosť šírky 100px a výšky 100px. Odlíšime ju tiež červenou farbou:

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

Nakoniec nastylujeme ďalšiu triedu .div2, tej ale nastavíme rozmery pomocou funkcie calc() a dáme ju modrú farbu. Výška sa pomocou percent dá nastaviť iba s určitým obsahom, urobíme to teda pomocou jednotky vh s hodnotou 67:

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

Výsledok bude vyzerať nejako takto:

Na prvý pohľad sa môže zdať, že sa vlastne nestalo nič neobvyklé. Stačilo by obyčajne nastaviť šírke hodnotu 10% alebo 10vw. Zvláštnosť tejto funkcie ale začína vo chvíli, keď sa zadá viac, než jedna hodnota. Naviac je tejto funkcii úplne jedno, aké jednotky majú zadané hodnoty, môžeme použiť px, percentá, em, proste čokoľvek a to všetko v rámci jednej funkcie. Jediné, na čo si musíme dávať pozor, je medzera medzi operátormi a jednotlivými hodnotami. Ak by sme to urobili bez medzier, tak funkcia nebude fungovať:

• Takto áno: calc(80% - 30px);
• Takto nie: calc(80%- 30px); alebo calc(80% -30px);

V našej triede .div2 zmeníme našu hodnotu 10% na výpočet, ktorý sa bude rovnať 10%:

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

Ako môžeme teraz vidieť, celkový výsledok je stále 10%, šírka sa teda vôbec nezmenila:

Táto funkcia sa najčastejšie využíva pri veľkých projektoch, kde sa namiesto rôznych hodnôt používajú vopred definované premenné. Ukážeme si teda ako to vyzerá v praxi. Najprv si definujeme premennú v rámci nášho CSS dokumentu, ktorá potom bude na našej stránke všeobecne platiť:

:root {
 --width1: 100px;
}

Ďalej pridáme nášmu dokumente ešte jednu triedu .div3. Nastavíme farbu pozadia na zelenú, výšku na 100px a šírku necháme vypočítať pomocou funkcie calc(). Použijeme našu premennú --width1 a pridáme k nej hodnoty 2% a 3vw:

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

Šírka sa nám teda automaticky dopočíta:

Teraz môžeme ľubovoľne meniť našu premennú --width1, ale aj keď ju nastavíme hodnotu na 0px, stále bude element vidieť, pretože jeho šírka bude 2% + 3vw.

Ďalšie zaujímavé využitie si ukážeme na farbe posledného elementu. Namiesto pevne stanovenej farby green použijeme zápis rgb() a funkciu calc(). Definujeme si novú premennú --color1 s hodnotou 127:

:root {
 --color1: 127;
}

Ďalej si v našej triede .div3 zmeníme vlastnosť background-color nasledujúcim spôsobom:

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

Náš výsledok po vykonaní zmien:

Takto bude nastavená farba na rovnakú zelenú ako bola predtým, teraz ju však možno jednoducho zmeniť pomocou našej premennej. Samozrejme by sme to takto mohli nastaviť aj bez tejto funkcie, avšak toto je len príklad, že funkciu calc() možno použiť prakticky všade, kde máme nejaké čísla. Najčastejšie sa táto funkcia potom používa pri kombinácii s JavaScriptom, kedy nastavujeme zmeny elementov pomocou nejakých hodnôt.

Ak niečomu nerozumiete, odporúčame stiahnuť si súbory v prílohe k tejto lekcii a všetko si poriadne vyskúšať.:)

V ďalšej lekcii, Zmeny vlastností posuvníkov (scrollbar) , si ukážeme, ako v CSS zmeniť veľkosť, farbu, alebo dokonca aj tvar posuvníkov na stránke.