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 , где читатель 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() Обзор Ахмада Шадида

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

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

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