calc() je osnovna CSS funkcija za preproste matematične izračune, kot so nadomestilo vrednosti za dolžino ali katere koli druge številke. Na voljo ima štiri preproste funkcije, in sicer seštevanje (+), odštevanje (-), množenje (*) in deljenje (/). Funkcija calc() je v jeziku CSS precej dobrodošla, saj celoten jezik temelji na samih številkah.

Najbolj uporabna sposobnost CSS funkcije calc() je sposobnost, da lahko mešamo različne enote med seboj, se pravi odstotki in pixli, em, … Ta sposobnost pa nam odpira nešteto novih možnosti. Ena takšnih je ta, da lahko v praksi uporabljamo fleksibilne mreže, medtem, ko imamo eno širino stolpca fiksno.

div { 
width: 90%; /* varovalka za brskalnike, ki ne pdopirajo calc() */ 
width: calc(100% - 300px); 
}

Okoli matematičnih operaterjev morate uporabljati presledke, drugače zadeva ne deluje.

Podpora brskalnikom – calc()

Podpora CSS funkciji calc() je presenetljivo dobra. Pred implementacijo takšnih rešitev se je vedno dobro pozanimati o sami podpori v brskalnikih. calc() funkcija je podprta v brsklanikih IE9+, Firefox 4+, Chrome19+, Safari 6+, Opera15+, iOS Safari 6+, Android 4.4+, … Podporo funkcije calc() in številnih drugih lahko preverite na “Can I use …” http://caniuse.com/calc.

Dodatne informacije o funkciji calc() – http://dev.w3.org/csswg/css-values/#calc-notation