CSS-функция clamp()

Функция clamp()

Функция clamp() позволяет ограничивать диапазон изменения некоего значения, задавая его нижний и верхний пределы. Она принимает три параметра: минимальное значение, вычисляемое (рекомендованное) значение, максимальное значение. Если вычисляемое значение не выходит за пределы, ограничиваемые минимальным и максимальным значениями, переданными функции, то она возвратит именно это значение.

Вот пример.

.element {
    width: clamp(200px, 50%, 1000px);
}

Здесь мы настраиваем ширину элемента, которая не должна быть меньше 200px и больше 1000px. Если значение в 50% не выходит за эти пределы — используется именно это значение. Вот как это выглядит.

Если 50% ширины области просмотра попадают в диапазон 200px-1000px — для задания ширины элемента будет использоваться именно это значение. В данном случае это 575px

Разберём этот пример:

Ширина элемента никогда не будет меньше 200px.
Второй параметр функции, заданный как 50%, будет использоваться только в том случае, если ширина области просмотра будет больше 400px и меньше 2000px.
Ширина элемента не превысит 1000px.

В итоге можно сказать, что функция clamp() позволяет задавать диапазон, в котором может изменяться передаваемое ей вычисляемое значение.

Здесь можно поэкспериментировать со страницей, при стилизации которой используется эта функция.

Как вычисляются результаты функции clamp()?

На MDN можно найти сведения о том, что, когда в качестве значения CSS-свойства используется функция clamp(), она является эквивалентом конструкции, в которой применяются функции max() и min(). Взгляните на следующий пример:

.element {
    width: clamp(200px, 50%, 1000px);
    /* Это - эквивалент следующего выражения */
    width: max(200px, min(50%, 1000px));
}

Значение 50% зависит от ширины области просмотра браузера. Представим, что ширина области просмотра составляет 1150px.

.element {
    width: max(200px, min(50%, 1000px));
    /* Представим, что ширина области просмотра составляет 1150px */
    width: max(200px, min(575px, 1000px));
    /* Промежуточный результат */
    width: max(200px, 575px);
    /* Итоговый результат */
    width: 575px;
}

Контекст имеет значение

Вычисленное значение зависит от контекста. При указании вычисляемого значения можно использовать различные единицы измерения: %, em, rem, vw/vh. Даже если значение выражено в процентах, при его расчёте может использоваться либо ширина области просмотра — в том случае, если элемент находится в теге <body>, либо ширина другого элемента, являющегося контейнером элемента.

Математические выражения

Стоит сказать о том, что при использовании функции clamp() можно передавать ей математические выражения, что избавляет нас от необходимости использования функции calc(). Спецификация говорит нам о том, что в каждом из аргументов clamp() можно использовать полные математические выражения. Поэтому здесь нет нужды во вложенных функциях calc(). Кроме того, если к итоговому значению нужно применить несколько ограничений, функции можно передавать более двух аргументов.

Взгляните на следующий пример:

.type {
  /* Ограничиваем font-size значениями, находящимися между 12px и 100px */
  font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
}

Что CSS-функции сравнения изменят в том, как мы проектируем макеты страниц?

Часто бывает так, что дизайнер, проектируя страницу, ориентируется и на мобильные, и на настольные устройства, рассчитывая на два сценария её использования. А при работе над некоторыми проектами приходится принимать во внимание и большее количество сценариев.

Я вижу эту ситуацию так, как показано ниже.

Наверху — то, как проектируют страницы сегодня. Внизу — то, чего можно ожидать в будущем

Верхняя часть иллюстрации представляет собой то, как страницы проектируют в наши дни. Тут можно видеть несколько шагов, представляющих разные области просмотра, на вывод в которых должна быть рассчитана страница. Эти шаги могут, например, представлять собой значение некоего свойства. На нижней части иллюстрации представлен непрерывный диапазон значений, который можно получить, ограничивая это значение неким минимумом и максимумом. Полагаю, что в будущем, например, при настройке размера шрифта, дизайнеры будут поступать примерно так, как показано ниже.

Минимальное, рекомендованное и максимальное значения свойства