CSS min(), max() и зажим()

Узнайте, как контролировать размер элементов, поддерживать правильный интервал и реализовывать плавную типографику с помощью этих хорошо поддерживаемых функций 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 , где читатель Калуан де Ласерда Патака поделился этой идеей: пусть элемент имеет дополнительные отступы при больших размерах экрана, но сохраняет минимальное отступы при меньших размерах экрана. Для этого используйте 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-трюках о ширине внутреннего элемента
• min(), max(), зажим() Обзор Ахмада Шадида

Изображение на обложке от @yer_a_wizard на Unsplash.