От автора: сегодня такое прекрасное время для написания CSS. Бывали у вас такие моменты, когда вы что-то кодируете и думаете про себя: «Я хочу, чтобы этот [текст, изображение, поле, вставьте элемент по вашему выбору здесь] увеличивался или уменьшался в зависимости от размера области просмотра … но только до определенного момента?».
Если вы еще не испытали этого, не волнуйтесь, это однажды произойдет. Но что вам не нужно делать, так это придумывать несколько сложных прослушивателей событий с использованием веб-API ResizeObserver или calc() функций CSS, или даже медиа-запросов CSS, которые будут заменять полные элементы или компоненты в зависимости от размера области просмотра.
Нет больше ничего, требующего столько усилий, потому что мы живем в эпоху, когда CSS великолепен, и он становится лучше с каждым днем (и с все более расширяющейся поддержкой браузеров). Сегодня я хочу поделиться с вами функцией CSS clamp() — единственной функцией, специально созданной, чтобы позволить почти любому элементу регулировать свой размер в определенных пределах, для соответствия области просмотра.
CSS clamp() — это элементный подход к адаптивному стилю. Подход, который больше подходит для нового мира совместно используемых независимых компонентов.
Краткая история границ CSS
Однако, прежде чем я углублюсь в CSSclamp(), давайте кратко посмотрим на два его основных предшественника: CSSmin() и CSSmax(). Понимание их поможет облегчить понимание CSS clamp() (и когда вы увидите некоторые обходные пути, которые раньше нужно было использовать для достижения того же самого, вы будете так рады, что они существуют!).
CSS min () и CSS max ()
Итак, когда-то были две функции CSS, известные как CSS min() и CSS max(). CSS min() позволяет вам установить наименьшее (наиболее отрицательное) значение из списка выражений, разделенных запятыми, в качестве значения свойства CSS.
Точно так же CSS max() установит наибольшее (самое положительное) значение из списка выражений, разделенных запятыми, как значение свойства CSS.
Обе функции min() и max() могут использоваться везде, где допускаются <length>, <frequency>, <angle>, <time>, <percentage>, <number> или <integer>.
Вот небольшой пример CodePen, который я собрал вместе со всеми тремя вариантами, чтобы можно было увидеть, как каждая функция отличается при сравнении.
Простой CodePen, иллюстрирующий CSS min (), CSS max () и CSS clamp () и то, чем они отличаются друг от друга, на практике.
Если вы измените размер браузера, в котором работает этот пример, вы увидите, что размер розового и зеленого прямоугольников изменится соответствующим образом (просто проверьте их размеры с помощью инструментов консоли разработчика, чтобы увидеть, как они настраиваются).
Наблюдение за этим в действии в браузере действительно помогает мне лучше понять эти концепции, поэтому я рекомендую вам поэкспериментировать с приведенным выше примером, прежде чем переходить к моим более подробным техническим объяснениям.
Пример CSS min()
Розовый прямоугольник на CodePen выше – это пример CSS min(). В дополнение к background-color и height для этого div нужно сосредоточить внимание на CSS:
width: min(50vw, 700px);
В конечном итоге, это означает следующее: ширина розового div будет до 700 пикселей, однако, если div будет меньше, чем 50% от ширины области просмотра (50vw = 50 ширины просмотра), он примет меньшее из двух значений.
Таким образом, если область просмотра имеет ширину 1300 пикселей, div будет иметь ширину 650 пикселей (что соответствует 50vw), однако, если область просмотра имеет ширину, скажем, 1600 пикселей, ширина div будет только 700 пикселей, потому что это меньшее значение между двумя доступными вариантами.
Сначала это звучит навыворот, но думайте о значении min(), как о максимальном значении, которое может иметь свойство.
Пример CSS max()
Поэтому, если CSS min() — это максимальное значение, которое может иметь свойство, CSS max() предоставляет минимальное значение, которое может иметь свойство. Правда, понятно? В CodePen div зеленого цвета — это пример CSS max().
width: max(50vw, 700px);
При действии CSS max() ширина div будет не менее 700 пикселей или 50 пикселей — в зависимости от того, что больше. Например, если область просмотра имеет ширину 1800 пикселей, ширина div будет 900 пикселей (поскольку 900 пикселей больше 700 пикселей, это второй параметр в функции CSS max() ). Если, однако, область просмотра имеет ширину всего 1200 пикселей, ширина div будет 700 пикселей, потому что 50vw будет только 600 пикселей, а 700 пикселей — большее из двух значений.
И хотя CSS min() и CSS max() обеспечили большие успехи в упрощении адаптивного дизайна CSS, разработчики хотели большего, мы хотели иметь возможность определять как нижнюю, так и верхнюю границы в одной и той же функции CSS. Так родился CSS clamp().
CSS clamp()
CSS clamp() предлагает лучшее сочетание CSS min() и CSS max(). CSS clamp(), по сути, зажимает значение между верхней и нижней границами. clamp() позволяет выбрать среднее значение в диапазоне значений от определенного минимума до максимума. Он принимает три параметра: минимальное значение, предпочтительное значение и максимально допустимое значение.
Если разбить clamp() на функции CSS min() и CSS max(), это будет выглядеть так: clamp(MIN, VAL, MAX) разрешается в max(MIN, min(VAL, MAX)). Это то, что раньше приходилось делать разработчикам, чтобы добиться масштабирования в CSS. Вы хотите, чтобы при написании CSS нужно было так серьезно думать о диапазонах значений? Я не хочу.
Хотя это довольно понятно, MIN это наименьшее (наиболее отрицательное) значение. Это нижняя граница диапазона допустимых значений. Если предпочтительное значение меньше этого значения, будет использоваться значение MIN.
Предпочтительным является выражение VAL, значение которого будет использоваться до тех пор, пока результат находится между значениями MIN и MAX.
Значение MAX является самым большим (самое положительное) значением выражения, к которому значение свойства будет присвоено, если предпочтительное значение больше, чем эта верхняя граница.
В приведенном выше примере CodePen код CSS clamp() показывает, как div голубого цвета растягивается и сжимается, пока его предпочтительное значение 60vw находится в пределах его нижней границы 400 пикселей и верхней границы 600 пикселей. Как только вычисленное значение 60vw выходит за эти границы, оно становится фиксированным.
Это код, который держит его в заданных пределах:
width: clamp(400px, 60vw, 600px);
У меня также есть пара видео ниже, демонстрирующих CSS clamp() на практике и код, чтобы вы могли увидеть, как он работает, чтобы другие элементы, такие как размеры шрифтов и изображения, были адаптивными.
Пример размера шрифта с CSS clamp()
В этом видео показано, как шрифт моего веб-сайта масштабируется вверх или вниз до определенной точки при изменении размера области просмотра, а затем останавливается, даже когда область просмотра продолжает масштабироваться.
Этот первый пример взят с моего личного веб-сайта, который я все еще дорабатываю перед запуском.
Как вы можете видеть на видео, когда я изменяю размер браузера, шрифт масштабируется вверх и вниз вместе с размером браузера, но если вы внимательно посмотрите, вы заметите, что в определенный момент шрифт перестает уменьшаться или увеличиваться. Спасибо, CSS clamp()!
Вот пример фактического кода, который создает различные варианты шрифта:
div { // other CSS... font-size: clamp(1.1rem, 0.7153rem + 1.6368vw, 1.5rem);
}Прежде чем вы подумаете, что я вычислил это предпочтительное значение самостоятельно, я этого не делал. В отличной статье Педро Родригеса о приемах CSS есть замечательный маленький калькулятор, который он сделал, где вы можете подключить MIN и MAX font-sizes, и он будет вычислять предпочтительное значение font-size, чтобы вставлять их между ними, чтобы они масштабировались, оставаясь читабельными.
Я настоятельно рекомендую попробовать его самостоятельно для любого адаптивного изменения размера шрифта, который вам может понадобиться.
Однако, чтобы разбить этот код, будет установлено значение font-size 1.1rem, пока вычисленное значение 0.7153rem + 1.6368vw не станет больше, чем 1.5rem. На этом этапе значение font-size будет вычисляться по формуле 0.7153rem + 1.6368vw, пока вычисленное значение этого предпочтительного значения не станет больше, чем 1.5rem. На этом этапе будет установлено значение font-size 1.5rem.
Я признаю, что формула вместо предпочтительного среднего значения немного сбивает с толку, но представьте себе: эта маленькая строчка CSS может все это сделать. От полноэкранного настольного представления до мобильного и обратно с помощью всего одной строчки CSS clamp(). Круто?
Хотите еще один реальный пример? Вот пример с изображением логотипа и изменением размера шрифта с помощью clamp().
Пример изображения и размера шрифта с помощью CSS clamp()
В этом видео показано, как логотип и шрифт веб-сайта, который я создал, масштабируются вверх или вниз до определенной точки при изменении размера области просмотра, а затем останавливаются, даже когда область просмотра продолжает масштабироваться.
Это одностраничный веб-сайт, который я создал, пока этот бизнес только начинал работать, но, хотя он прост, я все же хотел, чтобы он реагировал и хорошо выглядел на устройствах разных размеров. Итак, я снова обратился к CSS clamp().
Для логотипа код CSS прост:
.logo { width: clamp(350px, 75%, 800px); }И CSS шрифта:
.title { // additional css font-size: clamp(1.5rem, 5vw, 4rem); }Вот и все, что нужно. Никаких других медиа-запросов CSS, ничего нет. Это. Просто. Работает. Готовы освоить CSS clamp()?
Заключение
Я разработчик, которому больше всего нравится фронтенд-разработка. Хороший интерфейс, плавная анимация, яркие цвета и постоянно растущий список вещей, которые делают создание таких интерфейсов приятным.
CSS clamp() определенно заслужил место в этом списке. Адаптивные веб-сайты необходимы в современном мире, но убедиться, что они хорошо выглядят на всех устройствах — большая проблема, даже для того, что на первый взгляд кажется относительно простым.
clamp() все упрощает. Требуется, чтобы текст стал меньше для мобильных устройств, но шрифт не был слишком мелким? clamp() может справиться с этим. Хотите, чтобы изображение увеличивалось, когда пользователь смотрит на большой настольный монитор? clamp() может справиться с этим. Должен ли этот div изменяться в определенных пределах, чтобы заполнить область просмотра, как задумано в дизайне? clamp() может справиться с этим. С этого момента, когда мне понадобится адаптивность в пределах верхней и нижней границ, я буду спрашивать себя, подходит ли для этой работы CSS clamp().
Возвращайтесь ко мне через несколько недель — я напишу больше о JavaScript, React, ES6 или чем-то еще, связанном с веб-разработкой.
Спасибо за прочтение. Я надеюсь, что теперь вы лучше понимаете, как работает функция CSS clamp(), и что, если ситуация требует этого, вы можете добавить ее в свое собственное адаптивное веб-приложение. Удивительно, что теперь возможно с помощью всего нескольких строк кода!
Автор: Paige Niedringhaus
Источник: blog.bitsrc.io
Редакция: Команда webformyself.