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

 

 

Recent Posts

Али Апшерони

Умный не говорит и половины из того, что знает, глупый не ведает и половины из… Read More

01/08/2021

Какие бесплатные конструкторы сайтов будут лучшими для разработки сайта

Начинающим веб-мастерам бывает сложно выбрать конструктор сайтов, который бы полностью устроил их по соотношению удобства… Read More

28/07/2021

Владимир Высоцкий

Я понимаю, как смешно Искать в глазах ответ, В глазах, которым все равно, Я рядом… Read More

25/07/2021

Брюс Ли

Нет такой фразы "Я не могу!" Сумел один, смогут и другие. Не смог никто -… Read More

21/07/2021

Иоганн Вольфганг фон Гете

К чему душе беззлобье, широта уму, Руке готовность действовать и воля, Когда в горячке зла… Read More

12/07/2021

Какой бойлер использовать для кухни

Незаменимым устройством при отключении горячей воды является бойлер для кухни, позволяющий с комфортом мыть посуду… Read More

08/07/2021