Как использовать функцию calc() в CSS

Вот набор правил демонстрирующий использование свойства calc():

.container {
    height: calc(100% - 50px);
    width: calc(100% - 40px);
}

Как вы можете видеть в приведенном выше примере, свойство calc() позволяет динамически вычислить результат вычитания двух значений длины прямо в стилях без использования JavaScript, и даже если значения длины в разных единицах измерения.

Мы можем только выполнять арифметические вычисления с calc():

• Сложение (+)
• Вычитание (-)
• Умножение (*)
• Деление (/)

Свойство calc() работает с многими типами измерений в CSS:

• длина
• время
• угол
• частота
• различные целые числа

Свойство calc() не может работать со значениями цвета CSS.

Использование

Вычисления функции calc() будут наиболее полезны, когда вычисляемые значения представляют собой смесь относительных и фиксированных единиц.

Во-первых, давайте поговорим о случае, когда мы не должны использовать calc().

/*Не делайте так*/
div {
    width: calc(600px / 2);
}

В правиле выше, мы выполняем расчет, который мы можем легко сделать сами. Поэтому чтобы наш CSS был более читабельным, и, чтобы избежать ненужных вычислений браузером, что может замедлить наши веб-страницы, будет лучше если мы достанем реальный калькулятор и сами вычислим нужные значения:

div {
    width: 300px;
}

Где использовать calc()

Функция calc() становится крайне полезной, когда одно из значений является относительной единицей, а другое - фиксированной. Это умение сочетать различные единицы измерения особенно полезно в адаптивном веб-дизайне.

Вот пример с контейнером, который всегда будет иметь слева и справа отступы по 20px, независимо от размера экрана:

.container {
    margin: 0 auto;
    width: calc(100% - 40px);
}

В этом случае мы можем обеспечить комфортную читаемость нашего контента, независимо от того какое устройство используется. И этот способ центрирования "резинового" контейнер требует только минимального CSS и HTML. Другие методы проектирования адаптивного дизайна для достижения того же результата потребуют больше кода, и может повлечь за собой такие вещи, как отрицательные поля, media-запросы, и дополнительные HTML-контейнеры.

Спецификация

Спецификация для calc() описана в W3C CSS Values and Units Module 3. Имейте в виду, что на данный момент функция calc() является одним из трех свойств CSS выделенных в спецификации как группа риска. Вот то, что говорит CR: следующие свойства в группе риска и могут быть удалены в течение периода CR: calc(), toogle(), attr().

Поддержка браузеров

В настоящее время, функция calc() поддерживается примерно 82% всех браузеров используемых в Сети, по данным Caniuse. Internet Explorer 9 имеет частичную поддержку, в более новых версиях браузера есть полная поддержка функции.