Три логические CSS-функции: min (), max () и clamp ()

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

Предисловие

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

Safari первым представил полный набор функций в апреле 2019 года, а Chromium позже в том же году выпустил версию 79. В этом году с выходом Firefox 75 установился паритет для min(), max() и clamp() во всех вечнозеленых браузерах.

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

Посмотрите пример, изменяйте ширину:

See this code CSS min() Function on x.xhtml.ru.

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

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

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

Любую из этих функций можно использовать для значения любого свойства, где допускаются: длина, частота, угол, время, проценты, число дробное или целое. Их можно использовать отдельно (например, font-size: max(0.5vw, 50%, 2rem)) в сочетании с calc() (т.е. font-size: max(calc(0.5vw - 1em), 2rem)), или друг с другом (например, font-size: max(min(0.5vw, 1em), 2rem)).

При использовании вычисления внутри функций min(), max() и clamp() можно исключить calc(). Например, выражение font-size: max(calc(0.5vw - 1em), 2rem) будет работать аналогично font-size: max(0.5vw - 1em, 2rem).

Резюмируем:

• min(<value-list>): выбирает наименьшее (самое отрицательное) значение из списка выражений, разделенных запятыми
• max(<value-list>): выбирает наибольшее (наиболее положительное) значение из списка выражений, разделенных запятыми
• clamp(<min>, <ideal>, <max>): фиксирует значение между верхней и нижней границей на основе установленного идеального значения

Посмотрим ещё несколько примеров.

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

Согласно «Элементам типографского стиля» (Robert Bringhurst), «любая от 45 до 75 символов ширина рассматривается как удовлетворительная длина строки для страницы с одним столбцом, установленной с шрифтом с засечками и размером текста».

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

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

Таким образом предлагается браузеру определять ширину абзаца. Он установит ширину 50%. Если 50% окажется меньше 45ch, то будет выбрано 45ch. И, наконец, опять 50%, если это будет больше, чем 75ch.

Посмотрите пример, изменяйте ширину:

See this code Using the clamp() to limit width on x.xhtml.ru.

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

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

Управление отступами.

Используя концепцию, рассмотренную выше, когда функция min() может устанавливать значение «max», а max() – «min», можно приспособить max(), для установки минимального размера padding. Этот пример с сайта CSS Tricks, читатель Caluã de Lacerda Pataca поделился такой идеей: позволить элементу увеличивать отступы для большого размера экрана, но ограничивать минимальное значение для маленького размера, особенно по бокам.

Чтобы добиться такого результата, можно использовать calc() и вычитать минимальную ширину отступа с любой стороны: calc((100vw - var(--contentWidth)) / 2).
Или можно использовать max(): max(2rem, 50vw - var(--contentWidth) / 2). В-общем, это может выглядеть так:

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

Посмотрите пример, изменяйте ширину:

See this code Setting a minimum padding using the max() function on x.xhtml.ru.

Гибкая типографика

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

С помощью функции clamp() это выглядит элегантнее. Теперь не требуется много кода. Надо только указать минимально допустимый размер шрифта (например, 1.5rem для заголовка), максимальный (например, 3rem) и идеальный размер 5vw, а браузер возьмёт все заботы на себя.

Посмотрите пример, изменяйте ширину:

See this code Fluid Typography on x.xhtml.ru.

Таким образом, получаем типографику, которая масштабируется в зависимости от ширины окна просмотра страницы до тех пор, пока не достигнет предельных минимального или максимального значений. Очень компактная строка кода:

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

Предупреждение. Ограничение размера текста с помощью max() или clamp() может привести к сбою WCAG в 1.4.4 Изменение размера текста (AA), поскольку пользователь может оказаться не в состоянии масштабировать текст до 200% от его исходного размера. Обязательно нужно перепроверять результаты масштабирования.

Заключение

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

min(), max(), and clamp(): three logical CSS functions to use today.