Я абсолютно уверен, что каждый фронтенд-разработчик знает, что такое функция calc() или по крайней мере сталкивался с ней.
Эта функция — не самая новая часть CSS, но тем не менее уникальная. Сначала я и понятия не имел о том, как она работает и для чего применяется. Конечно, я с ней ознакомился и изучил основы, но сведения о самых значимых сценариях использования я получил в ходе ежедневной работы.
Это маленькая часть нашего инструментария, но я думаю, она заслуживает разбора сценариев использования.
Что делает функция calc()?
Коротко говоря, она делает возможным осуществление математических операций в вашем CSS. Это легко, когда речь идет о языке программирования, но для CSS это большая проблема. Здесь вы могли использовать только конкретные значения, что вызывало значительные сложности для отзывчивого дизайна.
С calc() вы можете высчитывать свои единицы основываясь на области просмотра или на родительском элементе. Вы можете добавлять, вычитать, умножать и делить ваши значения. Осуществление такого рода операций в вашем коде – несложная задача в век препроцессоров. Важно то, что с помощью calc() ваш браузер может высчитывать различные единицы, а это означает, что вы можете комбинировать относительные единицы (em, %, vw) с фиксированными (px).
Использование calc()
Все, что вам нужно сделать для использования функции calc(), – вызвать ее в ваших CSS-объявлениях. Рассуждая логически, вы можете использовать ее там, где требуемое значение является величиной, основанной на ширине, высоте или поворотной трансформации. Единственное важное правило – всегда отделять операторы пробелом.
Примеры использования
Фиксированные элементы макета с относительными
Если вы хотите сделать в вашем базовом макете боковую панель (сайдбар) или хедер фиксированной ширины, вы можете высчитать оставшуюся область вашего сайта.
Это может быть удобным, когда вы делаете шаблон администратора, где вам нужен зафиксированный и сложный, всегда видимый сайдбар. С этой целью вы создаете боковую панель шириной 260px, а ширину оставшейся части макета устанавливаете так: calc(100% – 260px). Этот же метод можно использовать с фиксированным хедером, в таком случае мы используем calc(100vh – 80px) для указания высоты области контента, и 80px – для хедера.
Естественно, это можно использовать для любого расположения, а также с другими единицами измерения (em или проценты), но в некоторых случаях данное гибридное решение является правильным.
Код html:
Код css:
Упрощение абсолютного центрирования
Все мы знаем, что самое основательное абсолютное центрирование это когда мы устанавливаем значение top и left в 50% и отодвигаем элемент на половину ширины и длины с помощью margins. Это достаточно устаревший метод, поскольку уже есть Flexbox и CSS Grid, но он все еще может быть полезен, а с функцией calc() – и немного проще.
Код html:
Код css:
Относительный размер шрифта, зависящий от ширины области просмотра
Теперь, с задействованием единиц vw и vh, мы всегда можем получить нашу ширину и высоту области просмотра. Знание этого может быть удобным, если вы хотите создать отзывчивый квадрат, но это также полезно для увеличения и уменьшения масштаба вашего шрифта в зависимости от размера экрана.
Просто используйте базовую операцию calc() в сочетании с единицами vw.
Код html:
Код css:
Создание простой сетки
В этом примере мы создаем 12 колонок плавающей сетки. Как я упоминал ранее, с появлением Flexbox и CSS Grid это несколько устарело, но и сегодня еще может быть полезным. Фокус в простой калькуляции с номером столбца.
Код html:
Код css:
Позиционирование бэкграунда справа снизу
Используя calc() вы можете высчитать правый нижний угол бэкграунда вашего элемента с относительной шириной, как в примере ниже:
Это, конечно, здорово, но есть и лучшее решение. Свойство background-position может иметь два варианта параметров, которые определяют отклонение оси, как здесь:
Итоги
Как можно видеть, случаи использования calc() довольно редки. Это продвинутый инструмент, который может пригодиться, если вы будете помнить о нем.
***
Подписывайтесь на наш канал в Telegram!
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
