W oczekiwaniu na możliwość używania zmiennych w kodzie CSS, która to nadejdzie (lub nie) dopiero za jakiś czas, nie licząc preprocesorów pokroju Sass czy Less, warto już teraz zobaczyć co może nam w bliższej przyszłości zaoferować funkcja calc(), czyli przeliczanie dowolnych wartości w czystym CSSie.

KalkulatorMożliwość przeliczania wartości to coś, bez czego jakoś do tej pory sobie radziliśmy. Jednak rozwój sieci postępuje bardzo szybko, a w nasze ręce trafia coraz więcej usprawnień. Jednym z nich jest tytułowy calc(), dzięki któremu już niedługo będziemy mogli tworzyć skomplikowane konstrukcje natywnie w CSSie, bez potrzeby wspomagania się JavaScriptem. Ta jedna funkcja jest potężnym narzędziem, które w znaczny sposób usprawni pracę web developera. Zaskakującym dla niektórych może być fakt, iż nie jest to nowość - na Mozilla Hacks znaleźć można artykuł z czerwca 2010 roku opisujący działanie calc() w Firefoxie 4! Według tabeli niezastąpionego Can I Use możemy dowiedzieć się o kolejnym zaskakującym fakcie - calc() wspierany jest przez... Internet Explorera 9, i to bez przedrostków! Oprócz przeglądarki Microsoftu mamy do dyspozycji wspomnianego wcześniej Firefoxa (należy użyć przedrostka -moz-), natomiast dobrą wiadomością jest wprowadzenie w następnej wersji (19) implementacji calc() w przeglądarce Chrome (z przedrostkiem -webkit-). Zważywszy na fakt, iż Chrome aktualizuje się dość często, nie trzeba będzie długo czekać. Więcej informacji o calc() znaleźć można w odpowiednim miejscu specyfikacji CSS3 Values, dobrym artykułem jest także ten z HTML5 Rocks.

Przykłady

Wiemy już jakie jest wsparcie przeglądarek, zobaczmy więc jak to działa: calc() pozwala na obliczenie dowolnych wartości, np. szerokości danego elementu, wielkości fonta czy marginesu między elementami. Do dyspozycji mamy cztery podstawowe działania: dodawanie, odejmowanie, mnożenie i dzielenie, a dodatkowym bonusem jest fakt, iż możemy używać wielu różnych jednostek w naszych obliczeniach: pikseli, procentów, jednostek rem i innych. Poniżej przedstawię kilka ciekawych przykładów, jednak jest to tylko wierzchołek góry lodowej i tylko od nas zależy jakie zastosowania przydadzą nam się najbardziej. Na potrzeby przykładów będę używał tylko wersji bez przedrostków.

article {

  padding: 10px;

  border: 2px solid #bada55;

  width: calc(100% - 2 * (10px + 2px));

}
W tym przykładzie obliczamy szerokość elementu uwzględniając padding i border.

section {

  width: 70%;

  margin-right: 10px;

}

aside {

  width: calc(30% - 10px);

}
Powyższy przykład pokazuje jak można łatwo manipulować szerokością elementu otrzymując wynik kalkulacji różnych wartości, w tym przypadku procentów i pikseli. Bez względu na rzeczywistą szerokość kontenera, oba elementy zajmują w sumie 100% szerokości, a jednocześnie nadal zachowujemy 10px marginesu między nimi.

h3 {

  font-size: calc(15px + 2*2em - 1rem/2);

}
Jak widać nie tylko szerokością można manipulować i nie musimy ograniczać się do prostych konstrukcji - calc() ma wiele zastosowań i daje sporo możliwości, tylko od nas zależy jak to wykorzystamy.

Podsumowanie

Powtarzam to z uporem maniaka, ale w końcu to się potwierdzi - z każdą kolejną zmianą CSS bardziej przypomina język programowania z prawdziwego zdarzenia i coraz mniej zależy od JavaScriptu. Czyżby za kilka lat zamiast web developera można będzie wpisać sobie w CV stanowisko programisty CSS? Widząc szalone eksperymenty, dema a nawet gry wykonane tylko za pomocą CSSa można uznać to za całkiem prawdopodobny scenariusz.