Web-it-blog/25.01.17

Используем функцию calc( ) в CSS3

Во многих препроцессорах, таких как Sass или LESS, есть возможность вычисления значений. Но CSS не является исключением. И это все заслуга calc( ) - очень полезной функции в CSS, которую мы рассмотрим в данной статье. Ее, кстати, тоже можно использовать в препроцессорах.

Знакомство с calc( ).

Давайте поближе познакомимся с этой функцией. Проще говоря, calc( ) используется для вычислений, но если присмотреться внимательнее, то можно заметить, что она ещё и смешивает типы, т.е. % с px, vh с em и т.д.

Поэтому calc() является мощным инструментом в ваших руках, который вы можете смело использовать в ваших проектах, потому что эта функция поддерживается практически всеми современными браузерами, кроме Opera Mini и Android 4.3 browser.

Немного о правилах.

Перед тем как продолжить, стоит обратить внимание на несколько правил, которых нужно придерживаться при работе с calc( ).

На примере ниже я продемонстрировал все ошибки, которые могут встретиться. Запомните, код ниже не будет работать.

calc(9px / 0)
calc (50% + 100px)
calc(30vw-15em)

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

Работаем с calc( ).

Часто, при верстке, нам нужно отцентровать элемент по ширине и высоте относительно страницы. И одним из решений данной проблемы является позиционирование этого элемента абсолютно, а также использования небольшого трюка. Этот трюк заключается в том, что мы пишем left: 50% и right: 50%, а margin-left и margin-top приравниваем отрицательным значениям половины ширины и высоты данного элемента, т.е

position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 200px;
margin-top: -50px;
margin-left: -100px;

Таким образом мы выровняли наш элемент. А теперь давайте воспользуемся нашей функций calc() и посмотрим что у нас получится

position: absolute;
top: calc(50% - 50px);
left: calc(50% - 100px);
height: 100px;
width: 200px;

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

В заключение.

Функция calc( ) является очень мощной и, безусловно, полезной при верстке. Благодаря ей, можно решить большое количество проблем. На сегодняшний день calc( ) поддерживается практически всеми браузерами, поэтому ее можно использовать в своих проектах, не беспокоясь о том, что она не будет работать.