calc() новая и пока ещё редко используемая функциональность в CSS3. Она позволяет задавать арифметические операции непосредственно в описании стилей в любых единицах измерения для вычисления размера и позиций, а также цветов элементов.
сalc() позволяет осуществлять простые математические операции: сложение, вычитание, умножение и деление.
Результаты вычислений можно задавать для размеров (cm, mm, in, pt, pc, px), частот (Hz, kHz), углов (deg, grad, rad, turn), времени (s, ms), а также в любых простых численных значений, используемых в CSS.
Вычисления осуществляются с соблюдением стандартных правил приоритета операторов.
width: calc(70%/3); width: calc(50% - 2em); width: calc((50% + 2em) / 2 + 14px); width: calc(100% / 3 - 2 * 1em - 2 * 1px); margin: calc(1rem - 2px) calc(1rem - 1px); background-position: calc(50% + 20px) calc(50% + 20px), 50% 50%; background-image: linear-gradient(to right, silver, white 50px, white calc(100% - 50px), silver); |
сalc() поддерживается всеми десктопными браузерами, включая IE9! Из мобильных браузеров, есть проблемы в опере и андройд браузере.
Мобильный и десктопный сафари, а также блекбери нуждаются в префиксах. Можно еще поставить префикс для opera mini на случай, если в ней это когда-нибудь заработает.
width: -webkit-calc(70% - 20px); width: -o-calc(70% - 20px); width: calc(70% - 20px); |
Пробелы calc(100% — 300px — 20px — 20px); по обе стороны от математических операторов обязательны.
