clamp()
=======

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

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


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


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

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


```css
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()` (en-US) и `max()` (en-US) функции. Для математических выражений можно использовать сложение, вычитание, умножение и деление без использования функции `calc()`. Также, можно использовать круглые скобки, чтобы задать порядок вычисление.

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

### Примечания

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

<clamp()> =   
  clamp( <calc-sum># (en-US){3} (en-US) )    
  
<calc-sum> =   
  <calc-product> [ (en-US) [ (en-US) '+' | (en-US) '-' ] (en-US) <calc-product> ] (en-US)\* (en-US)    
  
<calc-product> =   
  <calc-value> [ (en-US) [ (en-US) '*' | (en-US) '/' ] (en-US) <calc-value> ] (en-US)\* (en-US)    
  
<calc-value> =   
  <number>        | (en-US)  
  <dimension> (en-US)     | (en-US)  
  <percentage>    | (en-US)  
  <calc-keyword>  | (en-US)  
  ( <calc-sum> )    
  
<calc-keyword> =   
  e          | (en-US)  
  pi         | (en-US)  
  infinity   | (en-US)  
  -infinity  | (en-US)  
  NaN          
  
```

Примеры
-------

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

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


```css
p {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}
```



```html
<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 |
| --- |
| CSS Values and Units Module Level 4 # calc-notation |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `calc()`
* `max()` (en-US)
* `min()` (en-US)
* CSS Values