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

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

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

Когда речь идет о гибкой и текучей среде, типографика, контроле изменений размеров элементов, а также поддержании надлежащих интервалов, min(), max(), и clamp() могут во всем этом помочь.

Основы

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

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

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

Вы можете использовать min(), max() и clamp() в правой части любого выражения CSS, где это имеет смысл. Для min() и max() вы предоставляете список значений аргументов, и браузер определяет, какое из них является наименьшим или наибольшим соответственно. Например, в случае: 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)).

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

Резюмируем:

Давайте рассмотрим несколько примеров.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Автор: Una Kravets

Источник: web.dev

Редакция: Команда webformyself.