clamp()

CSS-функция clamp() задаёт значение в диапазоне между указанными нижней и верхней границами. Функция принимает три аргумента: минимальное значение, предпочитаемое значение и максимально допустимое. Может использоваться везде, где допускается применение <length>, <frequency>, <angle>, <time>, <percentage>, <number>, или <integer>.

clamp(MIN, VAL, MAX) вычисляется как max(MIN, min(VAL, MAX))

/* свойство: clamp(expression{3}) */
width: clamp(10px, 4em, 80px);

В примере выше ширина будет не меньше 10px и не больше 80px. Но если размер одного "em" будет находиться в диапазоне от 2.5px до 20px (в сумме от 10px до 80px), то ширина будет равняться этим 4em.

Давайте предположим, что в примере выше 1em равен 16px:

width: clamp(10px, 4em, 80px);
/* если 1em = 16px, 4em = (16px * 4) = 64px */
width: clamp(10px, 64px, 80px);
/* clamp(MIN, VAL, MAX) вычисляется как max(MIN, min(VAL, MAX))) */
width: max(10px, min(64px, 80px)) 
width: max(10px, 64px);
width: 64px;

Синтаксис

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

Минимальное значение – наименьшее значение, являющееся нижней границей диапазона допустимых значений. Если "предпочитаемое" значение меньше "минимального", будет использоваться именно "минимальное".

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

Максимальное значение – наибольшее значение, которое будет устанавливаться, если предпочитаемое будет превышать верхную границу допустимого диапазона.

Передаваемые значения могут быть математическими функциями (более подробно смотрите на calc), точными значениями, или другими выражениями, такими как attr(), результатом которых является допустимый тип аргумента (как например <length>), или вложенные min и max функции. Для математических выражений можно использовать сложение, вычитание, умножение и деление без использования функции calc(). Также, можно использовать круглые скобки, чтобы задать порядок вычисление.

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

Примечания

  • Математические выражения, включающие в себя проценты для ширины и высоты колонок таблицы, групп колонок таблицы, строк таблицы, групп строк таблицы и ячеек таблицы и при значении "auto" и при значении "fixed" свойства "table-layout" могут обрабатываться как если бы было задано значение auto.
  • Допускается вкладывать функции max() и min() в качестве значений выражений, в этом случае внутренние обрабатываются как простые скобки. Выражения являются полностью математическими выражениями, поэтому вы можете использовать сложения, вычитание, умножение и деление без использования самой функции calc().
  • Выражение может быть значениями, объединяющими операторы сложения (+), вычитания (-), умножения (*) и деления (/) с использованием стандартных правил приоритета операторов. Не забудьте поставить пробелы с каждой стороны от операндов + и -. Операнды в выражении могут иметь любое значение синтаксиса <length>. Вы можете использовать разные единицы для каждого значения в своём выражении. Вы также можете использовать круглые скобки, чтобы установить порядок вычислений, когда это необходимо.
  • Часто вам может понадобиться использовать min и max в функции clamp ().

Formal syntax

clamp( <calc-sum>#{3} )

где
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*

где
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*

где
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

Примеры

Установка минимального и максимального размера шрифта

clamp() позволяет вам установить размер шрифта, который изменяется в зависимости от ширины области видимости, но не уменьшается ниже и не увеличивается выше заданного размера. Она имеет тот же эффект, что и в Fluid Typography, но в одну строку и без использования медиа-запросов.

p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
<p>
If 2.5vw is less than 1rem, the font-size will be 1rem.
If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
Otherwise, it will be 2.5vw.
</p>

Accessibility concerns

TBD

Specifications

Specification Status Comment
CSS Values and Units Module Level 4
Определение 'clamp()' в этой спецификации.
Редакторский черновик Initial definition.

Browser compatibility

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
<clamp()>Chrome Полная поддержка 79Edge Полная поддержка 79Firefox Полная поддержка 75IE Нет поддержки НетOpera Полная поддержка 66Safari Полная поддержка 13.1WebView Android Полная поддержка 79Chrome Android Полная поддержка 79Firefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Полная поддержка 13.4Samsung Internet Android Полная поддержка 12.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки

See also