Функции min(), max() и clamp() в CSS

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

Una Kravets

По мере того, как адаптивный дизайн становится все более детализированным, CSS постоянно развивается, чтобы дать авторам больше контроля. Функции min(), max() и clamp(), которые теперь поддерживаются во всех современных браузерах, – это одни из новейших инструментов, позволяющих создавать более динамичные и адаптивные сайты и приложения. Вы можете использовать эти функции для управления размерами элементов и их изменением, поддержания расстояния между элементами и создания гибкой и плавной типографики.

Математические функции calc(), min(), max() и clamp() позволяют использовать в качестве значений компонентов математические выражения со сложением (+), вычитанием (-), умножением (*) и делением (/).

Значения и единицы CSS, уровень 4

Поддержка браузеров

min()

max()

clamp()

Использование

Вы можете использовать min(), max() и clamp() в правой части любого выражения CSS, где это имеет смысл. Для min() и max() вы указываете список значений, а браузер определяет, какое из них наименьшее или наибольшее. Например, в случае с width: min(1rem, 50%, 10vw) браузер вычисляет, какая из этих относительных единиц является наименьшей, и использует это значение для ширины элемента.

Функция max() делает то же самое для максимального значения.

Чтобы использовать clamp(), введите три значения: минимальное, идеальное (для расчета) и максимальное.

Эти функции можно использовать везде, где разрешены <length>, <frequency>, <angle>, <time>, <percentage>, <number> или <integer>. Их можно использовать отдельно (как в font-size: max(0.5vw, 50%, 2rem)), с calc() (как в font-size: max(calc(0.5vw - 1em), 2rem)) или в составном виде (как в font-size: max(min(0.5vw, 1em), 2rem)).

Ниже приведены примеры использования этих функций.

Идеальная ширина

Согласно книге Основы стиля в типографике Роберта Брингхерста, "для одноколоночной страницы, набранной шрифтом с засечками, оптимальной считается длина строки от 45 до 75 символов".

Чтобы ширина текстовых блоков не выходила за пределы 45–75 символов, используйте clamp() и единицу измерения ch (ширина символа, равная 0):

p {
  width: clamp(45ch, 50%, 75ch);
}

Это позволяет браузеру определить ширину абзаца. По умолчанию ширина устанавливается на 50%. Если 50% меньше, чем 45ch, то в качестве ширины используется 45ch, а если 50% больше, чем 75ch, то используется 75ch.

Вы также можете использовать только min() или max(). Если вы хотите, чтобы ширина элемента всегда составляла 50%, но не превышала 75ch на больших экранах, используйте width: min(75ch, 50%);, чтобы задать максимальный размер.

Аналогичным образом можно задать минимальный размер для разборчивого текста с помощью функции max(), например width: max(45ch, 50%);. В этом случае браузер выбирает большее значение, то есть элемент должен быть не меньше 45ch.

Управление полями

Вы также можете использовать max(), чтобы задать минимальный размер отступа. Этот пример взят из статьи на сайте CSS Tricks, в которой читатель Калуа де Ласерда Патака (Caluã de Lacerda Pataca) поделился следующей идеей: у элемента могут быть дополнительные поля на экранах большего размера, но на экранах меньшего размера поля должны быть минимальными. Для этого используйте calc() или max() и вычтите минимальный отступ с обеих сторон элемента: calc((100vw - var(--contentWidth)) / 2) или max(2rem, 50vw - var(--contentWidth) / 2). В таблице стилей это должно выглядеть так:

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

Адаптивная типографика

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

Раньше для масштабирования шрифтов в clamp(), требовались сложные строки стилей. Теперь вы можете поручить эту работу браузеру. Задайте минимальный допустимый размер шрифта (например, 1.5rem для заголовка), максимальный размер (например, 3rem) и идеальный размер (например, 5vw). Теперь у вас есть типографика, которая масштабируется в соответствии с шириной области просмотра страницы, пока не достигнет предельных минимального и максимального значений, с использованием очень небольшого количества кода:

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Дополнительные ресурсы

• Значения и единицы измерения CSS на MDN
• Спецификация значений и единиц CSS уровня 4
• Статья о ширине внутренних элементов на сайте CSS-Tricks
• Обзор min(), max(), clamp() от Ахмада Шадида