Свойство 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()
становится крайне полезной, когда одно из значений является относительной единицей, а другое - фиксированной. Это умение сочетать различные единицы измерения особенно полезно в адаптивном веб-дизайне.
Вот пример с контейнером, который всегда будет иметь слева и справа отступы по 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. Internet Explorer 9 имеет частичную поддержку, в более новых версиях браузера есть полная поддержка функции.
© 2008 - 2024 Webmasters.BY Все права защищены
Новый комментарий