Функция calc() с примерами использования

Функция calc()

Я абсолютно уверен, что каждый фронтенд-разработчик знает, что такое функция calc() или по крайней мере сталкивался с ней.

Эта функция — не самая новая часть CSS, но тем не менее уникальная. Сначала я и понятия не имел о том, как она работает и для чего применяется. Конечно, я с ней ознакомился и изучил основы, но сведения о самых значимых сценариях использования я получил в ходе ежедневной работы.

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

Что делает функция calc()?

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

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

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

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

Примеры использования

Фиксированные элементы макета с относительными

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

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

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

Код html:

use case 1

Код css:

use case 1 css

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

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

Код html:

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

Код css:

Упрощение абсолютного центрирования, код css

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

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

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

Код html:

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

Код css:

Относительный размер шрифта, код css

Создание простой сетки

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

Код html:

Создание простой сетки

Код css:

Создание простой сетки, код css

 

Позиционирование бэкграунда справа снизу

Используя calc() вы можете высчитать правый нижний угол бэкграунда вашего элемента с относительной шириной, как в примере ниже:

Вы можете высчитать правый нижний угол бэкграунда

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

background-position

Итоги

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

***
Подписывайтесь на наш канал в Telegram!
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]

Оставьте комментарий

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

Прокрутить вверх