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