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

 

 

Share

Последние посты

Сомерсет Моэм

Когда вы станете старше, вы поймете, что в мире можно хоть как-нибудь жить только при… Читать далее

27/03/2024

Михаил Грушевский

Все учатся своему родному языку, а наша беда такова, что нужно учить его больше, чем… Читать далее

26/03/2024

ТОП-5 надежных покерных обменников

Профессиональный покер – это многочисленные турниры и крупные суммы, что требует правильной настройки финансовых инструментов.… Читать далее

25/03/2024

Гай Юлий Цезарь

Все вокруг стремятся истребить врагов, но не объединиться с друзьями Гай Юлий Цезарь   Читать далее

24/03/2024

Как выбрать оптимальный смартфон для ребенка?

Сегодняшние дети сталкиваются с технологиями с самого раннего возраста, и смартфон уже давно перестал быть… Читать далее

22/03/2024

Выбираем электроскутер: важные критерии и характеристики

Лет 20 назад наблюдался пик популярности скутеров с двигателем внутреннего сгорания (ДВС). Маленькие, юркие, с… Читать далее

21/03/2024