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().
  • The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( * ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any <length> syntax value. You can use different units for each value in your expression. You may also use parentheses to establish computation order when needed.
  • Oftentimes you will want to use min and max within a clamp() function.

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 Нет поддержки НетWebView Android Полная поддержка 79Chrome Android Полная поддержка 79Firefox Android Нет поддержки НетOpera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

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

See also