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

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

Попробуйте

width: min(50vw, 200px);

width: min(100vw, 4000px);

width: min(150vw, 100px);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <img
      alt="Firefox logo"
      class="logo"
      src="/shared-assets/images/examples/firefox-logo.svg" />
  </div>
</section>

В первом примере выше ширина будет не более 200px, но может быть меньше, если ширина области просмотра меньше 400px (в этом случае 1vw будет равен 4px, а 50vw — 200px). В этом приёме для задания фиксированного максимального значения свойства используется абсолютная единица, а относительная единица позволяет уменьшать значение для более узких областей просмотра.

Синтаксис

min(1, 2, 3)
min(1px, 2px, 3px)

Параметры

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

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

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

Примечания

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

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

<min()> = 
  min( <calc-sum># )

<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() для задания максимального размера шрифта, убедитесь, что текст можно увеличить как минимум на 200% для удобства чтения (без вспомогательных технологий, например функции масштабирования).

• MDN: пояснения к руководству WCAG 1.4 Понимание критерия успеха 1.4.4: изменение размера текста | WAI | W3C

Примеры

Задание максимального размера для подписи и поля ввода

Ещё один вариант использования min() — задание максимального размера адаптивных элементов формы, позволяющее уменьшать ширину подписей и полей ввода по мере уменьшения ширины формы.

Рассмотрим CSS:

input,
label {
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  width: min(40%, 400px);
  background-color: pink;
}

form {
  margin: 4px;
  border: 1px solid black;
  padding: 4px;
}

В этом примере ширина самой формы, а также её внешних отступов, рамки и внутренних отступов составляет 100% от ширины родительского элемента. Мы задаём для поля ввода и подписи ширину, равную меньшему из значений: 40% ширины формы за вычетом внутренних отступов или 400px. Иными словами, максимальная ширина подписи и поля ввода составляет 400px. Минимальная ширина равна 40% ширины формы, что на экране умных часов даёт очень маленькое значение.

<form>
  <label for="misc">Type something:</label>
  <input type="text" id="misc" name="misc" />
</form>

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

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

См. также

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