19.01.2022

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

Функции сопоставления CSS:  min(), max() и clamp()

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

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

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

CSS

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

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

CSS

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

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

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

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

Наибольшее значение

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

CSS

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

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

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

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

CSS

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

2. Внедрение CSS @supports

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

CSS

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

Функции сопоставления CSS:  min(), max() и clamp()

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

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *