Функции сравнения CSS: min(), max() и clamp()

От автора: функции min(), max() и clamp(), которые теперь поддерживаются во всех современных браузерах, являются одними из инструментов, делающих создание веб-сайтов и приложений более динамичными и отзывчивыми.

1. Функция CSS min()

Функция CSS min() позволяет вам установить наименьшее (самое отрицательное) значение из списка значений, разделенных запятыми. Она может принимать два параметра, а также — функцию min можно использовать внутри другой функции min, если необходимо провести сравнение между несколькими значениями. Синтаксис:

min(value1, value2);
min(value1, min(value2, min(value3, value4)));

2. Функция CSS max()

Функция CSS max() позволяет вам установить наибольшее (наиболее положительное) значение из списка значений, разделенных запятыми. Она используется для возврата наибольшего значения из набора значений, разделенных запятыми. Функция может принимать значения типа длины, частоты, целого числа, угла и времени. Синтаксис:

max(value1, value2...);

3. Функция CSS clamp()

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

Минимальное значение

Предпочтительное значение

Максимальное значение

Минимальное значение пригодится, когда предпочтительное значение меньше минимального значения, аналогично максимальное значение пригодится, когда предпочтительное значение больше максимального. Предпочтительное значение становится полезным, когда оно находится между минимальным и максимальным значением. Синтаксис:

clamp(Min, Pre, Max);

Как добавить резервный вариант для неподдерживаемых браузеров

Как и в случае с любой новой функцией CSS, важно предоставить запасной вариант. Для этого мы можем использовать один из следующих:

1. Добавить резервное объявление вручную

Это означает, что мы должны предоставить запасной вариант, добавив свойство перед сравнением. См. Пример ниже:

.test { padding: 4rem 1rem; padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

Поддерживающие браузеры проигнорируют первую запись. В то время как не поддерживающие будут ее использовать.

2. Использование CSS @supports

Мы можем использовать @supports, чтобы определить, поддерживаются ли функции сравнения CSS. Любой браузер, поддерживающий их, должен поддерживать и запрос @supports.

.test { /* Default, for non-supporting browsers */ padding: 4rem 1rem;
} @supports (width: min(10px, 5vw)) { /* An enhancement for supporting browsers */ .test { padding: clamp(2rem, 10vmax, 10rem) 1rem; }
}