Min, max и clamp CSS

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

Это меня взволновало, но затем я проверил, как долго некоторые основные браузеры их поддерживают. Для большинства из них — это несколько месяцев: Chrome поддерживает их с 2019 года, а Safari — с 2018 года.

Как говорится, лучше поздно, чем никогда. Плюс ко всему эта пандемия занимает мои мысли, так что я не расстраиваюсь. Но с точки зрения постоянного обучения и отслеживания обновлений все еще неловко. Поэтому я подумал, что напишу о них в блоге, чтобы помочь всем, кто еще не знает о них. Также, чтобы доказать себе (и миру), я наконец-то догнал ситуацию (пока).

Что могут делать эти функции?

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

С помощью min, вы можете осуществить это всего одной строчки.

Тот же результат, меньше CSS! Конечно, это простой пример, но это потому, что width — это уже удачное свойство. У него есть такие дополнительные свойства, как max-width и min-width, чтобы задать ограничения. Но рассмотрите все свойства, у которых этого нет, например, padding и font-size. Но эти функции переносят все это в нативный CSS в гораздо более простом формате.

Насколько точно они работают?

Начнем с min и max, поскольку clamp — это их комбинация. Я считаю, что эти имена вводят в заблуждение, поскольку их работа кажется перевернутой.

Да, min устанавливает максимально возможное значение и max устанавливает минимально возможное значение. Нет, для меня это тоже не имеет никакого смысла. В качестве напоминания я нарисовал несколько набросков того, как эти значения работают вместе.

К счастью, clamp легче понять. У него есть три аргумента: наименьшее значение, базовое значение и наибольшее значение. Базовое значение — это то, что срабатывает, пока мы находимся в этом диапазоне.

На первый взгляд этот пример довольно легко понять. Размер шрифта тегов абзаца начинается с 1rem и увеличиваются по мере увеличения размера экрана. Но он перестанет увеличиваться, когда достигнуто 2rem. Базовое значение просто контролирует, насколько быстро происходит это увеличение.

Помните, когда я упоминал, что эти функции могут сделать гибкую типографику быстрее и проще? Именно так можно было бы это сделать.

Могу я их использовать?

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

Как я надеюсь, все больше и больше дизайнеров узнают, что это не обязательно должно выглядеть одинаково в разных браузерах.

Идите вперед и найдите свои пределы!

Мне неловко, что я нахожу полезные функции CSS, подобные этим месяцам спустя. Но они уже доступны, они полезны, их имена сбивают с толку, но в основном они готовы к работе! Идите вперед и примите ограничения свойств CSS, чтобы стать более безграничным.

Автор: Max Antonucci

Источник: //www.maxwellantonucci.com

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

Комментарии Вконтакте:

Комментарии запрещены.