Przeliczanie jednostek CSS 3.0 - funkcja calc()

W uzupełnieniu do artykułu "px – em – % – pt - in -mm - cm - czyli jak określać rozmiar w CSS" w którym pisałam na temat jednostek jakimi określamy rozmiary w CSS chcę chcę napisać kilka dodatkowych słów na temat, który jest jak najbardziej powiązany, a mało spopularyzowany.

Przy okazji, zanim jednak przejdziemy dalej, przypominam  adres kalkulatora jednostek CSS który można znaleźć tutaj.

Temat który zamierzam poruszyć dotyczy dotyczy możliwości przeliczania wartości liczbowych, w tym właśnie jednostek CSS, wewnątrz arkusza stylów.
Aktualna specyfikacja CSS definiuje wyrażenie funkcyjne calc() które może być niedocenionym narzędziem w pracy każdego web developera, pozwala bowiem wykonywać obliczenia bezpośrednio w CSS bez konieczności korzystania ze skryptów javascript. Przytoczmy tutaj oryginalny opis zaczerpnięty ze specyfikacji:

The calc() function allows mathematical expressions with addition (‘+’), subtraction (‘-’), multiplication (‘*’), and division (‘/’) to be used as component values. The ‘calc()’ expression represents the result of the mathematical calculation it contains, using standard operator precedence rules. It can be used wherever <length>, <frequency>, <angle>, <time> or <number> values are allowed.

Jak widać funkcja calc() pozwoli nam wykonywać proste obliczenia arytmetyczne: dodawanie, odejmowanie, mnożenie i dzielenie, co więcej zaś potrafi obsługiwać różnego typu wartości, a więc interpretować jednostki i co za tym idzie dokonywać ich konwersji. Do dyspozycji mamy w naszych wyrażeniach jednostki takie jak: piksele, procenty, em, rem i inne. Stąd dopuszczalne jest np. wyrażenie:

div {
    width: calc(100% - 20px);
}
p {
  margin: calc(1rem - 2px) calc(1rem - 1px);
}
div.myclass{
  width: calc(100% - 20px*2 - 8px*2);
}

Zgodność z przeglądarkami 
Pewnie będziecie zaskoczenie, ale funkcję calc() obsługują już praktycznie wszystkie wiodące przeglądarki. Obsługuje ją InternetExplorer w wersji 9, Firefox od wersji 4 udostępniał własną implementację calc() pod postacią -moz-calc(). Chrome także posiada własną wersję o nazwie -webkit-calc().