Функция calc() с примерами использования
Я абсолютно уверен, что каждый фронтенд-разработчик знает, что такое функция 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!
Могу ли я отправить электронное письмо… Функция CSS calc()
Могу ли я отправить электронное письмо… Функция CSS calc()Gmail
Настольная веб-почта
2020-02
iOS
2020-02
1
Андроид
2020-02
1
Мобильная веб-почта
2020-02
Перспектива
Окна
2003
2007
2010
2013
2016
2019
Почта Windows
2020-02
Outlook.com
2020-02
iOS
2020-02
Андроид
2020-02
Яху! Почта
Настольная веб-почта
2020-02
iOS
2020-02
Андроид
2020-02
АОЛ
Настольная веб-почта
2020-02
iOS
2020-02
Андроид
2020-02
Мозилла Тандерберд
Окна
2020-02
ПротонПочта
Настольная веб-почта
2020-03
iOS
2020-03
Андроид
2020-03
Быстрая почта
Настольная веб-почта
2021-07
ПРИВЕТ
Настольная веб-почта
2020-06
Апельсин
Настольная веб-почта
2020-02
2021-03
iOS
2020-02
Андроид
2020-02
LaPoste.
netНастольная веб-почта
2021-08
СФР
Настольная веб-почта
2020-02
iOS
2020-02
Андроид
2020-02
Mail.ru
Настольная веб-почта
2020-10
Как использовать функцию CSS calc()
Не знаете, что такое функция CSS calc()? Что ж, продолжайте читать, потому что вы собираетесь узнать что-то новое.
CSS calc() — это функция, используемая для простых вычислений для определения значений свойств CSS прямо в CSS. Функция calc() позволяет использовать математические выражения со сложением (+), вычитанием (-), умножением (*) и делением (/) в качестве значений компонентов.
Преимущества
- Самая полезная функция этой функции — возможность смешивать единицы измерения. Например, вы можете умножать пиксели на проценты.
- Что делать, если я уже использую математические функции с препроцессором? Если вы используете математические функции препроцессора, то пришло время переключиться на нативную математику CSS, потому что она более мощная и вы можете просто делать с ней больше вещей.
- Наконец-то появилась отличная поддержка браузера. Согласно «Могу ли я использовать», эту функцию поддерживают 80,79% браузеров. На изображении ниже вы можете увидеть таблицу поддержки браузера.
Синтаксис и некоторые замечания
Здесь вы можете увидеть пример CSS calc() в действии:
Вот несколько вещей, которые вы должны знать о CSS calc(), прежде чем начать с ним работать:
- Расчет ведется слева направо.
- Сначала будут вычисляться деление или умножение, а математические выражения в круглых скобках также будут вычисляться первыми. Префикс
- , -moz- и -webkit- , необходим для более ранних версий Firefox, Chrome и Safari.
- Как мы уже упоминали ранее, вы можете смешивать юниты. Например, вы можете умножать пиксели на проценты.
- Пробел обязателен с обеих сторон операторов « + » и « — ». Операторы « * » и «/» можно использовать без пробелов вокруг них.
Подборка примеров
Мы подготовили для вас несколько примеров, где вы можете увидеть, насколько полезной может быть функция calc().
Пример №1. Создание простой и гибкой сетки
В этом примере показано, как создать адаптивную сетку. Мы использовали calc() для расчета ширины столбцов для нашей сетки.
Если вы хотите увидеть HTML и CSS, просто нажмите на вкладки «HTML» и «CSS» выше примеров.
См. сетку Pen Simple Calc() от Alen (@alenvuletic) на CodePen.16804
.Пример № 2. Центрирование элементов с абсолютным позиционированием
Не знаете, как центрировать элемент с абсолютным позиционированием? Это очень легко сделать с помощью calc() — просто посмотрите на наш пример:
.