Введение
Давайте поговорим про относительно молодую, но очень интересную CSS функцию clamp(). Эта функция появилась в css стилях в апреле 2020 года, но до сих пор её мало кто использует.
Функция clamp() используется что бы задать диапазон изменения некоего элемента. Она принимает в себя три значения — минимальный размер, рекомендованное значение, максимальный размер.
Разберем функцию на примере заголовка
Когда мы получили от дизайнера макет в Figma, в котором видим все размеры заголовков и текстов, а так же «точки слома», мы понимаем как писать адаптив.
На рисунке выше мы видим три основные «брейкпойнта» — это 1440 px (десктопная), 768 рх (планшетная) и 320 рх (мобильная). Видим как меняется размер заголовка «Придумайте что отправить», эти размеры 48рх, 44рх, 32 рх.
Конечно же по привычке мы начнем писать медиа запросы, в которых пропишем правила для изменения текста (Заголовков) при адаптиве, но тут как раз можно использовать css-функцию clamp(), которая позволит сократить количество строчек кода.
В примере мы создали на Codepen набросок текста из макета и применили к нему функцию clamp(), в которой указали минимальное и максимальное значение из нашего макета, а так же указали рекомендуемое.
Текст изначально принял значение font-size в 48рх, при уменьшении размера экрана он принимает значение в 7vw пока не достигнет значения в 32px. Таким образом можно указать поведение текста в адаптиве, что значительно упростить его написание.
В одном выражении допустимо применять разные единицы (px, %, vw, em, rem и др.), а также использовать функцию
calc().
При указании значений соблюдайте условие «минимум < значение < максимум». Иными словами, значение должно быть больше минимума, но меньше максимума. Если параметры выставлены в неверном порядке (например:clamp(40px, 10px, 20px)), то в качестве значения выбирается минимум, в данном случае 40px.
Применение css-функции clamp()
На сайте CanIUse мы видим что функция clamp() набрала уже почти полные 95%. а это говорит нам что в крупных сложных проектах (которые могут быть открыты пользователями со старых браузеров) пока не рекомендуется ее использовать, а вот в небольших или лендингах можно смело вставлять.
