Как использовать calc() в CSS

Свойство CSS calc() позволяет нам выполнять простые расчеты в таблицах стилей.

Вот набор правил демонстрирующий использование свойства calc():

.container {
  height: calc(100% - 50px);
  width: calc(100% - 40px);
}

Как вы можете видеть в приведенном выше примере, свойство calc() позволяет динамически вычислить результат вычитания двух значений длины прямо в стилях без использования JavaScript, и даже если значения длины в разных единицах измерения.

Мы можем только выполнять арифметические вычисления с calc():

  • Сложение (+)
  • Вычитание (-)
  • Умножение (*)
  • Деление (/)

Свойство calc() работает с многими типами измерений в CSS:

  • длина
  • время
  • угол
  • частота
  • различные целые числа

Свойство calc() не может работать со значениями цвета CSS.

Использование

Вычисления calc() будут наиболее полезны, когда вычисляемые значения представляют собой смесь относительных и фиксированных единиц.

Во-первых, давайте поговорим о случае, когда мы не должны использовать свойство calc().

/*Не делайте так*/
div {
  width: calc(600px / 2);
}

В правиле выше, мы выполняем расчет, который мы можем легко сделать сами. Поэтому чтобы наш CSS был более читабельным, и, чтобы избежать ненужных вычислений браузером, что может замедлить наши веб-страницы, будет лучше если мы достанем реальный калькулятор и сами вычислим нужные значения:

div{
  width: 300px;
}

Где использовать calc()

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

Вот пример с контейнером, который всегда будет иметь слева и справа отступы по 20px, независимо от размера экрана:

.container {
  margin: 0 auto;
  width: calc(100% - 40px);
}

В этом случае мы можем обеспечить комфортную читаемость нашего контента, независимо от того какое устройство используется. И этот способ центрирования "резинового" контейнер требует только минимального CSS и HTML. Другие методы проектирования адаптивного дизайна для достижения того же результата потребуют больше кода, и может повлечь за собой такие вещи, как отрицательные поля, media-запросы, и дополнительные HTML-контейнеры.

Спецификация

Спецификация для calc() описана в W3C CSS Values and Units Module 3. Имейте в виду, что на данный момент свойство calc() является одним из трех свойств CSS выделенных в спецификации как группа риска. Вот то, что говорит CR: следующие свойства в группе риска и могут быть удалены в течение периода CR: calc(), toogle(), attr().

Поддержка браузеров

В настоящее время, свойство calc() поддерживается примерно 82% всех браузеров используемых в Сети, по данным caniuse.com. Internet Explorer 9 имеет частичную поддержку calc(), в более новых версиях браузера есть полная поддержка функции.

Перевод статьи.


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

You have no rights to post comments