Categories: CSSУроки программирования

Ознакомление с функцией 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 пока не поддерживает эту функцию.