Функции min(), max() и clamp() в CSS

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

min()

Позволяет установить наименьшее значение из списка выражений, разделенных запятыми, в качестве значения свойства CSS.

Например следующий код:

.element {
    width: min(300px, 50%);
}

Пример можно посмотреть здесь.

Указывает браузеру на то, что ему нужно выбрать наименьшее значение из 50% и 300px. Если 50% ширины области просмотра составит более чем 300px, то данный оператор вернет последнее значение. Эквивалент этого кода в данном случае:

.element {
    width: 50%;
max-width: 300px;
}

Вы можете больше чем два выражения. Например следующий код будет работать:

.element {
    width: min(500px, 50% - 120px, 50vw - 5vh);
}

Мы выбираем наименьшее значение среды всех перечисленных.

max()

Данная функция работает с точностью до наоборот. С её помощью мы можем зафиксировать минимальное значение, которое может принимать CSS-свойство.

В коде:

.element {
    width: max(300px, 50%);
}

браузеру нужно выбрать максимальное значение.

clamp()

Функция  вычисляет среднее значение между верхней и нижней указанными границами. Она принимает три параметра:

.element {
    width: clamp(100px, 50%, 500px);
}

• минимальное значение;
• вычисляемое (рекомендованное) значение;
• максимальное значение;

Если вычисляемое значение не выходит за пределы, ограничиваемые минимальным и максимальным значениями, переданными функции, то она возвратит именно это значение. Пример по ссылке.

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

Аналогом текущего примера может служить следующая запись:

.element {
min-width: 100px;
    width: 50%;
max-width: 500px;
}

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

.element {
   width: clamp(100px, 50%, 500px);  /* max(100px, min(50%, 500px)) */
}

Если мы можем написать эквивалентный код без использования этих свойств, то зачем нам они?

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

Дело в том, что не для всех CSS свойств у нас есть свойства с приставкой min и max. Именно в этих свойствах данные функции призваны быть использованы.

Например: нам нужно делать плавающий размер шрифта между  12px и 50px.

.text {
font-size: clamp(12px, 2.5vw, 50px); 
}

Можем сделать это с помощью функции clamp. При этом, можно писать и более сложные выражения:

.text {
font-size: clamp(12px, 10 * 1vw, 80px);
}

Выражением могут быть значения, объединяющие операторы сложения (+), вычитания (-), умножения (*) и деления (/) с использованием стандартных правил приоритета операторов. Главное, чтобы с каждой стороны от операндов + и - был пробел (как с функцией  calc()). Операнды в выражении могут иметь любые CSS размеры  px, % , em, rem, vh и т. д.).

Для плавающих отступов margin и  padding:

.offset {
    margin: min(7vh, 40px) 0 20px;
}

Эти функции работают со всеми CSS свойствами и применение им можно найти в многих моментах – для теней, градиентов, анимаций и многого другого.

Эти свойства станут заменой многим точечным  @media запросам, когда получат хорошую браузерную поддержку.

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