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

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

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

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

CSS max(value1, value2…);

1	max(value1, value2…);

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

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

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

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

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

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

CSS clamp(Min, Pre, Max);

1	clamp(Min, Pre, Max);

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

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

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

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

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

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

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

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

CSS .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; } }

1234567891011

.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;  }}

Таблица совместимости

Спасибо за чтение.

Автор: Vivek Kumar

Источник: webformyself.com