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

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

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

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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Использование 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-image: url(logo.png);
background-position: calc(100% - 20px) calc(100% - 20px);

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

background-image: url(logo.png);
background-position: right 20px bottom 20px;

Заключение

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

Автор: Adam Laki

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree