Ознакомление с функцией calc() в CSS

Функция calc() в CSS – это простой способ выполнить простые математические действия прямо в CSS стилях без использования, например, языка программирования PHP. Функция умеет работать с четырьмя простыми математическими операторами: сложение (+), вычитание (—), умножение (*) и деление (/). С помощью функции calc() вы можете рассчитать значения свойств CSS прямо во время их определения.

Пример синтаксиса функции calc()

/* свойство: calc(математическое действие); */
width: calc(100% - 35px);

Математическое действие, которое можно выполнить для выражения, может принимать следующие формы:

• + (сложение). Пример: width: calc(25px + 75px);
• - (вычитание). Пример: padding-top: calc(50px - 7%);
• * (умножение). Пример: line-height: calc(20% * 2);
• / (деление). Пример: margin: calc(35% / 2);

Замечания по использованию функции calc()

• Знаки плюс и минус должны быть отделены от значений пробелами с двух сторон. Выражение calc(100% -35px) будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (неверное выражение), в то время как выражение calc(100% - 35px) – будет интерпретировано как вычитание из процентов определенное количество пикселей (т.е., это будет правильное выражение).
• Операторы * и / не требуют отделения от операндов пробелами, но это не запрещено и даже приветствуется для лучшей читаемости
• Вы можете использовать разные единицы измерения для каждого из операндов. Чтобы указать желаемый порядок вычисления, вы можете использовать скобки.
• Если значение не может быть вычислено, оно игнорируется.
• Деление на ноль выдаст ошибку при парсинге HTML.

Когда можно использовать calc()

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

Пример использования: позиционирование объекта с помощью отступа

В примере ниже мы позиционируем блок на всю ширину окна, с отступами по краям в 40px при любом размере девайса.

.block {
 position: absolute;
 width: 85%; /* для браузеров, которые не поддерживают calc() */
 width: calc(100% - 50px);
 padding: 15px;
 border: 1px #000 solid;
}

Поддержка функции calc() браузерами

Поддержка на удивление довольно хорошая.

• Firefox до версии 16.0 поддерживает значение -moz-calc.
• Chrome до версии 26.0 поддерживает значение -webkit-calc.
• Safari с версии 6.0 поддерживает значение -webkit-calc.
• На мобильных устройствах Android только с 67+, iOS только на 6.0+, а Opera Mini пока не поддерживает эту функцию.