Wyrażenia matematyczne
CSS 3
calc(wyrażenie)
Wyrażenie składa się z dowolnie wybranych następujących wielkości: liczby, długość, procenty, kąty, czas, częstotliwość. Ponadto może zawierać podstawowe operatory działań matematycznych:
- +
- dodawanie
- -
- odejmowanie
- *
- mnożenie
- /
- dzielenie
Czasami proste określnie pojedynczej jednostki staje się niewystarczające. Przykładowo możemy chcieć, aby jakiś element miał rozmiar 50% i dodatkowo 10 pikseli. Sposobem na uzyskanie takiego rezultatu jest określenie wyrażenia matematycznego:
calc(50% + 10px)
Tworzenie prostych wyrażeń matematycznych jest dość intuicyjne. Wystarczy pamiętać o kilku podstawowych zasadach:
- Dodawać i odejmować można tylko wielkości tego samego typu. W przeciwnym razie takie wyrażenie nie miałoby sensu - jak np. dodawanie długości i czasu:
calc(10px + 1s). Procenty są traktowane jako wartości typu określonego w opisie danej cechy CSS. Dlatego poprawny będzie np. taki styl: "width: calc(50% + 10px)". - Mnożenie odbywa się zawsze z udziałem liczby - np.:
calc(5 * 10px)albocalc(10px * 5) - Dzielimy zawsze przez liczbę - np.:
calc(100vw / 40)
Oczywiście w pojedynczym wyrażeniu matematycznym można wstawić więcej niż tylko dwie wartości.
Po obu stronach operatorów działań dodawania i odejmowania obowiązkowo muszą znajdować się spacje bądź inne białe znaki. Ponadto wyrażenia matematyczne składające się z więcej niż 20 wartości mogą nie działać.
Przeglądarki
 Chrome |  Firefox |  Edge |  Opera |  Safari | |
|---|---|---|---|---|---|
calc | 26 2013-03-26 | 16 2012-10-09 | 12 2015-07-29 | 15 2013-07-02 | 7 2013-10-22 |