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

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

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

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

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

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

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

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

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

Узнать подробнее

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

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

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

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

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

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

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

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

Узнать подробнее

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

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

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

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

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

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

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

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

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

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

Автор: Vivek Kumar

Источник: vivekjaiskumar.medium.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

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

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

Узнать подробнее

Верстка. Быстрый старт

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

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментирование закрыто.