СВОЙСТВО 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() поддерживается примерно 82% всех браузеров используемых в Сети, по данным caniuse.com. Internet Explorer 9 имеет частичную поддержку calc(), в более новых версиях браузера есть полная поддержка функции.
- Подпись автора