Математическая функция CSS calc()
Поиск

Математическая функция CSS calc()

Nikel, 20.05.2019

В css давно существует функция, позволяющая делать математические вычисления, она появилась уже довольно давно и имеет полную кроссбраузерность. Но к сожалению, так и не получила широкого распространения и используется относительно мало. Речь идет о математической функции calc(), которая может выполнять динамический расчет различных величин: размеров элементов (что может освободить, например, от использования в этом случае JavaScript), углов, времени анимации и переходов.

Использование функции calc() с различными единицами измерений

Арифметические действия

calc() поддерживает четыре вида арифметических действий: сложение +, вычитание -, умножение * и деление /.

Вот как можно вычислять ширину при помощи этой функции.

Обратите внимание, что в вышеприведенных свойствах мы задаем для calc вместе различные единицы измерений: проценты и пиксели, em и пиксели. Она умеет вычислять величины складывая, деля и умножая разные единицы измерения. Собственно говоря, это одно из  главных преимуществ этой функции, потому что данная возможность удобна для применения на практике.

Представим ситуацию, что у нас есть блок контента, который должен быть на всю ширину окна браузера, за исключением сайдбара справа, занимающего 300px. Для этого блока контента мы не можем указать width в пикселях, так как он должен быть резиновый и меняться. Чтобы вычислить его width, проще всего использовать calc() и отнять от 100% ширину сайдбара в пикселах. width:calc(100% - 300px);

Правильная запись calc()

Следует обратить особое внимание на то, какая должна быть правильная запись функции calc(). Когда вы записываете величины, которые нужно сложить, слева и справа от математического оператора (+, -, *, /) должны находиться пробелы. Их использование обязательно, в противном случае функция просто не сработает.

Еще один нюанс, который следует знать: если по каким-то причинам значение математического выражения не может быть вычислено, то оно тоже не сработает.

Что может calc()?

Красивая запись дробей, когда число нацело не делится

Когда вы задаете какому-либо свойству css величину в процентах нередки случаи, когда приходится указывать бесконечную дробь. Приведу простой пример, у нас есть макет из трех колонок занимающих всю доступную ширину, но 100% на 3 не делится, и если мы зададим для каждой колонки 33% , то 1% пространства останется неизрасходованным, поэтому нужно писать 33,333%, что согласитесь, не очень удобно. Если же мы  используем функцию calc() в этом случае, все будет выглядеть значительно красивее и, кроме того, так мы добьемся чтобы была вычислена точная треть общей ширины.

Выравнивание по центру

Большинство знает способ выравнивания блока по центру с использованием позиционирования: свойство left указывается равным  50%, а margin-left задается в виде отрицательного значения равного половине блока. Об этом способе подробнее в этой статье . А благодаря возможностям calc() можно сделать его значительно проще и сразу записать чему будет равно left ( при условии, что наш центрируемый элемент равен 200px).

Использование в сложных трехколоночных макетах

Трехколоночный макет создается довольно сложно если область контента должна быть резиновой.

Давайте рассмотрим первым старый вариант макета из трех колонок. Левый сайдбар будет 300px, правый — 250px, а точную ширину контента мы не знаем и не можем задать. Устанавливаем ее равной 100%, а для всех блоков устанавливаем обтекание float:left. Теперь правый сайдбар выйдет за пределы ряда, так как с ним суммарная величина элементов будет больше 100%. Чтобы все элементы поместились в ряд используется отрицательный margin-right, который укорачивает ширину элемента content на величину равную двум сайдбарам, и  далее  применяется отступ padding-right, чтобы блоки не были внахлест друг на друге (правый сайдбар не закрывал текст).

Демонстрационный пример

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

Задаем также для всех блоков float:left, размеры левого и правого сайдбаров, а размер content указываем с помощью calc().

Демонстрационный пример