Вы любите верстать? А использовать @media запросы? Я – нет, а потому очень рад тому, что существуют CSS-функции, которые я опишу ниже.
Функция calc()
Данная функция позволяет нам совмещать относительные и абсолютные величины. Сделать размер элемента равный 5px + 5rem? Никаких проблем.
Пример того, как используя функцию calc() можно расположить элемент ровно посередине экрана пользователя:
Функции min() и max()
Две функции, работающие противоположно друг другу.
min() – выбирает наименьшее значение из введённых.
max() – выбирает наибольшее значение из введённых.
Вроде всё просто, но на деле данные функции работают не очень логично. По сути min() ограничивает максимальную величину значения, а max() – наоборот, минимальную.
Логика работы данных функций обратна и к тому нужно привыкнуть.
Посмотрев на данный пример вы можете задаться вопросом: «Зачем нам использовать CSS-функции, если то же самое можно было сделать с помощью max-width». И вы будете правы, данные кнопки можно было стилизовать без min() и max(), однако CSS функции работают с любыми свойствами, в отличие от max-width и max-height.
Функция clamp()
Самая интересная функция из представленных, так как она позволяет задать минимальное, рекомендованное и максимальное значение, а дальше функция сделает всё сама.
Итог
Работа с CSS-функциям ограничена лишь вашим воображением, они легки в использовании и позволяют упростить работу с абсолютными величинами.
На этом у меня всё, спасибо за внимание!
