Функция calc(), которая стала доступна в CSS3, позволяет выполнять математические действия над значениями свойств. Например, вместо указания статического значения ширины элемента, мы можем использовать calc(), объявив, что эта величина является результатом сложения двух других ширин.
|
1 2 3 |
.quux { width: calc(100px + 50px); } |
ПОЧЕМУ CALC()?
Если вы часто используете CSS-препроцессоры (например, SASS), то вы наверняка могли встретить что-то похожее на вышеприведенный пример.
|
1 2 3 4 5 6 7 8 9 10 |
.quux { width: calc(100px + 50px); } // Или используя переменные SASS $width-one: 100px; $width-two: 50px; .xyzzy { width: $width-one + $width-two; } |
Однако функция calc() является лучшим вариантом сразу по двум причинам:
1.Мы можем объединять в одном выражении разные единицы измерения.
В частности, мы можем комбинировать такие относительные единицы, как проценты и viewport units (vw, vh, vmin и vmax) с абсолютными единицами – пикселями. Например:
|
1 2 3 |
.quux { width: calc(100% - 60px); } |
В этом примере элемент .quux всегда будет иметь ширину на 60 пикселей меньшую, чем у родителя.
2. Вычисленным значением является само выражение, а не результат этого выражения.
Вот как это выглядит при использовании препроцессора:
|
1 2 3 4 5 6 7 8 |
// Значение заданное в SCSS .quux { width: 100px + 50px; } // Скомпилированный CSS и вычисленное значение в браузере .quux { width: 150px; } |
А вот так это будет работать при использовании функции calc():
|
1 2 3 4 5 6 7 8 9 |
// Значение заданное в CSS .quux { width: calc(100% - 50px); } // Вычисленное значение в браузере .quux { width: calc(100% - 50px); } |
Это означает, что значения в браузере будут более динамическими, они смогут адаптироваться к любым изменениям вьюпорта. Если мы имеем элемент, высота которого на 20 пикселей меньше высоты вьюпорта, то после изменения вьюпорта, высота элемента также останется на 20 пикселей меньше новой высоты видимой части окна.
ИСПОЛЬЗОВАНИЕ CALC()
Функция calc() может быть использована для осуществления всех простейших математических действий с числовыми значениями свойств. Вот несколько примеров:
|
1 2 3 4 5 6 7 |
.quux { width: calc(40vmax + 2rem); padding: calc(1vw + 1em); transform: rotate( calc(1turn - 30deg) ); background: hsl(90, calc(3 * 30%), 50%); font-size: calc(40vw / 3); } |
Вложение Calc()
Функция Calc() может быть вложенной. Однако внутренние функции будут рассматриваться как обычные выражения в скобках. Для примера возьмем следующую вложенную конструкцию:
|
1 2 3 |
.quux { width: calc( 100% / calc(90px * 2) ); } |
Вычисленное значение этой функции будет выглядеть таким образом:
|
1 2 3 |
.quux { width: calc( 100% / (90px * 2) ); } |
Поддержка
Сейчас calc() поддерживается практически всеми современными браузерами. Браузеры же, которые не поддерживают эту функцию просто-напросто игнорируют значение, заданное мат.выражением. Поэтому, чтобы исключить все возможные косяки, на всякий случай задавайте и статическое значение свойства.
|
1 2 3 4 |
.quux { width: 90%; /* Значение для старых браузеров */ width: calc(100% - 40px); /* Значение для нормальных браузеров */ } |
КОГДА МОЖНО ИСПОЛЬЗОВАТЬ CALC()?
Функция calc() может быть полезна в различных ситуациях.
Пример 1 – центрирование элементов
Использование calc() предоставляет нам еще одно решение старинной проблемы выравнивания элемента по горизонтали и вертикали внутри контейнера. Если мы знаем размеры дочернего элемента, то стандартным решением центрирования будет являться использование отрицательных margin, равных половине ширины и высоты элемента.
|
1 2 3 4 5 6 7 8 |
// Предположим, что .quux имеет 400px в высоту и 400px в ширину .quux { position: absolute top: 50%; left: 50%; marging-top: -200px; margin-left: -200px; } |
Calc() помогает нам сократить эту запись почти в два раза.
|
1 2 3 4 5 |
.quux { position: absolute top: calc(50% - 200px); left: calc(50% - 200px); } |
Конечно, с появлением флексбокса, такой метод центрирования стал, мягко говоря, не так актуален. Тем не менее никуда не делись элементы с фиксированным и абсолютным позиционированием, центровка которых невозможна с помощью flexbox.
Пример 2 – создание корневого размера сетки
Функция cacl() может быть использована для создания зависимой от размера вьюпорта сетки. Для этого зададим размер шрифта корневого элемента через vw.
|
1 2 3 |
html { font-size: calc(100vw / 30); } |
Теперь 1rem будет соответствовать 1/30 ширины вьюпорта (напомню, что rem – это размер шрифта корневого элемента страницы, т.е. html, а vw – это 1% от ширины видимого окна браузера). Для любого текста на странице это будет означать, что он автоматически смасштабируется при любом изменении ширины вьюпорта.
Если мы будем задавать размеры нетекстовых элементов через
rem, они будут вести себя также: ширина блока с width: 1rem; будет всегда равна 1/30 ширины вьюпорта.
Пример 3 – ясность
И, наконец, calc() может быть полезен для внесения ясности в неочевидные расчеты. Например, если вы хотите, чтобы элемент занимал ширину равную 1/6 ширины родителя, то вы, предварительно посчитав, пишете что-то вроде этого:
|
1 2 3 |
.quux { width: 16.666666667%; } |
Однако более наглядна, в особенности для людей первый раз читающих ваш код, будет следующая запись:
|
1 2 3 |
.quux { width: calc(100% / 6); } |
Перевод статьи: https://bitsofco.de/how-calc-works/
Следить за обновлениями блога в: твиттере, фейсбуке, вконтакте