Функция CSS `clamp()`

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

Попробуйте

font-size: clamp(1rem, 2.5vw, 2rem);

font-size: clamp(1.5rem, 2.5vw, 4rem);

font-size: clamp(1rem, 10vw, 2rem);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    The font-size of this text varies depending on the base font of the page,
    and the size of the viewport.
  </div>
</section>

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

Синтаксис

/* Static values */
width: clamp(200px, 40%, 400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw, 20em, 100vw);

/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);

Параметры

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

min

Минимальное значение — это наименьшее (наиболее отрицательное) значение. Оно является нижней границей диапазона допустимых значений. Если предпочтительное значение меньше него, будет использовано минимальное значение.

val

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

max

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

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

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

При работе с этой функцией учитывайте следующее:

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

Возвращаемое значение

clamp(MIN, VAL, MAX) разрешается как max(MIN, min(VAL, MAX)).

В зависимости от переданных параметров функция возвращает <length>, <frequency>, <angle>, <time>, <percentage>, <number> или <integer>.

Формальный синтаксис

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

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

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

<calc-value> = 
  <number> |
  <dimension> |
  <percentage> |
  <calc-constant> |
  ( <calc-sum> )

<calc-constant> = 
  e |
  pi |
  infinity |
  -infinity |
  NaN

Примеры

Сравнение min(), max() и clamp()

В этом примере веб-страница использует min(), max() и clamp() для адаптивного задания размеров.

В примере размеры элементов страницы регулируются тремя способами:

• длина строк текста
• размер шрифта текста абзацев
• размер шрифта текста заголовков

Во всех трёх случаях страница сочетает единицы измерения относительно области просмотра (vw и <percentage>), чтобы задавать размер, меняющийся вместе с шириной области просмотра, и значение, не зависящее от области просмотра (rem и px), чтобы задать минимальный и/или максимальный размер.

Пример доступен по адресу https://mdn.github.io/css-examples/min-max-clamp/. Откройте его в новом окне и попробуйте изменить ширину окна.

Длина строки (задаётся свойством width элемента <body>) будет увеличиваться вместе с шириной окна, но только до определённого предела (1000px), после которого перестанет увеличиваться. Мы используем min(), чтобы задать максимальную длину строки: она может быть меньше 1000px, но не будет его превышать. Это полезно, поскольку длинные строки труднее читать, поэтому часто нужно ограничить их длину. Для этого мы используем min(1000px, calc(70% + 100px)): когда результат вычисления на основе процентов превышает 1000px, вместо него используется фиксированное значение 1000px.

Размер текста абзацев (задаётся свойством font-size элемента <p>) уменьшается при сужении окна, но только до определённого предела. После этого (когда 1.2vw становится меньше 1.2rem) размер больше не уменьшается и остаётся равным 1.2rem. Мы используем max(), чтобы задать минимальный размер шрифта: шрифт может увеличиться выше 1.2rem, но никогда не станет меньше этого значения. Это полезно, поскольку очень мелкий текст трудно читать. Для этого мы используем max(1.2rem, 1.2vw). Это означает, что font-size будет установлено на 1.2rem, если только вычисленное значение 1.2vw не окажется больше значения 1.2rem; в таком случае оно будет установлено на 1.2vw.

Размер текста заголовков (задаётся свойством font-size элемента <h1>) зависит от области просмотра и имеет как максимальный, так и минимальный предел. Для этого мы используем clamp(1.8rem, 2.5vw, 2.8rem). Значение, зависящее от области просмотра, равно 2.5vw, но ограничено значениями 1.8rem и 2.8rem, поэтому:

• если вычисленное значение 2.5vw меньше 1.8rem, будет использовано 1.8rem;
• если вычисленное значение 2.5vw больше 2.8rem, будет использовано 2.8rem.

Это не позволяет тексту заголовков становиться слишком мелким в очень узком окне или слишком крупным в очень широком окне.

HTML

<h1>Basic responsive test</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In orci orci,
  eleifend id risus nec, mattis rutrum velit. Suspendisse fringilla egestas erat
  eu convallis. Phasellus eu velit ut magna dapibus elementum cursus at ligula.
  Ut tempus varius nibh, nec auctor sapien iaculis sit amet. Fusce iaculis,
  libero quis elementum viverra, nulla ante accumsan lectus, sit amet convallis
  lacus ipsum vel est. Curabitur et urna non est consectetur pulvinar vel id
  risus. Ut vestibulum, sem in semper aliquet, felis arcu euismod sapien, ac
  imperdiet massa nisl quis sem. Vestibulum ac elementum felis, in tempor velit.
  Pellentesque purus ex, mattis at ornare quis, porta condimentum mi. Donec
  vestibulum ligula vel nulla blandit, quis euismod nulla vestibulum.
  Suspendisse potenti. Nunc neque mauris, tempor sed facilisis at, ultrices eget
  nulla. Pellentesque convallis ante nec augue porttitor, id tempus ante luctus.
</p>

<p>
  Integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec. Nunc eu
  facilisis lorem. Maecenas faucibus sapien eleifend, semper tellus at, pharetra
  quam. Cras feugiat vulputate tortor at rhoncus. Class aptent taciti sociosqu
  ad litora torquent per conubia nostra, per inceptos himenaeos. Nam non felis
  quis sem lobortis sodales vel id libero. Phasellus sit amet placerat lorem.
</p>

CSS

html {
  font-family: sans-serif;
}

body {
  margin: 0 auto;
  width: min(1000px, calc(70% + 100px));
}

h1 {
  letter-spacing: 2px;
  font-size: clamp(1.8rem, 2.5vw, 2.8rem);
}

p {
  line-height: 1.5;
  font-size: max(1.2rem, 1.2vw);
}

Доступность

Если clamp() используется для управления размером текста, убедитесь, что максимально допустимое значение — это относительная единица длины, которая не менее чем в два раза превышает минимально допустимое значение, например:

font-size: clamp(1rem, 2.5vw, 2rem);

Это помогает обеспечить возможность увеличения размера текста как минимум до 200% при масштабировании страницы.

• MDN: пояснения к руководству WCAG 1.4

• [Понимание критерия успеха 1.4.4: изменение размера текста

  WAI

  W3C](https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html)

Спецификации

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

См. также

• calc()
• max()
• min()
• Изучение: значения и единицы измерения CSS