Функция Calc() и примеры ее применения в CSS

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

Здесь представлена только маленькая часть инструментария, но, по моему мнению, она заслуживает звания скромного, но универсального набора вариантов использования.

В чем заключается задача функции calc()?

Говоря вкратце, она предоставляет пользователю возможность проводить математические операции в CSS; это довольно легко сделать в языке программирования, но в языке, похожем на CSS, это может стать большой проблемой. В CSS можно использовать только точное значение, что иногда бывает связано с трудностями при разработке адаптивного дизайна.

Благодаря calc() вы можете проводить расчеты, основываясь на окне просмотра или родительском элементе. Можно проводить сложение, вычитание, деление и умножение значений. В эпоху препроцессоров такими операциями никого не удивишь. Что действительно впечатляет, благодаря calc(), браузер может проводить такие операции даже с разными единицами измерения, то есть вы можете комбинировать относительные значения (em, %, vw) и фиксированные, например, px.

На сегодняшний день мы имеем удивительную поддержку браузера!

Использование calc()

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

Фиксированный макет со значением Relative

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

Это может пригодиться, когда вы делаете шаблон панели администрирования и вам нужна сложная, всегда видимая боковая панель фиксированной ширины. Для этого нужно создать панель с шириной 260px и задать значения ширины остальных частей макета, как calc(100% – 260px). Также можно использовать этот метод для фиксированного заголовка, в этом случае используем calc(100vh – 80px) для высоты области контента и 80px для заголовка.

Конечно, вы можете использовать любой макет, можно применить em или процентный показатель, но в некоторых случаях такое гибридное решение подойдет лучше всего.

Упрощенное абсолютного выравнивания по центру

Все мы знаем, что стандартное абсолютное выравнивание – это когда мы задаем значение 50% для верхнего и левого полей и смещаем элемент на половину ширины и высоты. Это устаревший метод, так сейчас активно используются Flexbox и CSS Grid, но его все же можно использовать, с calc() это даже намного проще сделать.

Относительный размер шрифта, основанный на ширине области просмотра

С введением единиц измерения vw и vh, теперь мы всегда можем получить ширину и высоту области просмотра. Это может пригодиться не только тогда, когда мы хотим сделать адаптивную область, но и когда нам нужно увеличить или уменьшить размер шрифта в зависимости от размера экрана.

Просто попробуйте сделать базовую операцию calc() с комбинированной единицей vw и все получится.

Создаем простую сетку

В этом примере мы создаем гибкую сетку из 12 столбцов. Как я упоминал ранее, из-за Flexbox и CSS Grid эта техника немного устарело, но все же она иногда используется. Ключевым моментом являются простые расчеты с номерами столбцов:

Позиционирование фонового изображения по нижней границе

С помощью calc(), вы можете следующим образом вычислить нижнюю границу фона элемента с относительной шириной:

Это неплохое решение, но теперь у нас есть вариант получше. Свойство background-position может иметь два дополнительных параметра, определяющие смещения по оси следующим образом:

Заключение

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

Автор: Adam Laki

Источник: //pineco.de/

Редакция: Команда webformyself.

Комментарии Вконтакте: