Логические функции CSS calc(), clamp(), min() и max() поддерживаются всеми современными веб-браузерами. Но, несмотря на то, что они легко доступны, простой поиск на GitHub говорит нам о том, что внедрение этих функций идет медленно. Давайте выясним.
Я знаю, что вы могли подумать: "Математика?! Фу, с глаз моих долой". Но спросите себя — хватит ли у вас силы воли противиться удовлетворению от идеально выровненных вложенных друг в друга контейнеров?
Знаете, после того, как я написал статью о различных хитростях CSS (она была подобрана несколькими публикациями), я увидел, что на сайт приходит трафик по таким ключевым словам, как «как центрировать элемент div», что забавно, потому что я никогда не упоминал об этом в статье конкретно. Но это показывает, что разработчикам нужен доступ к быстрым фрагментам кода, которые можно легко реализовать повторно.
Таким образом, это будет предпосылкой для этого урока.
Update: Мне удалось написать подробное руководство по центрированию элементов в CSS.
Я сосредоточусь на теме математических функций CSS в контексте достижения различных результатов компоновки. Например, Как создать адаптивный контейнер с помощью нескольких строк CSS, как добавить адаптивный padding и как заставить сайдбар вести себя как сайдбар.
Давайте взглянем.
calc()
Функция calc() поддерживает четыре арифметические операции: сложение (+), вычитание (-), умножение (*) и деление (/). Эта функция в основном используется для расчета динамической ширины и высоты контейнера для создания адаптивного layout.
Пример кода:
Но calc() больше всего выделяется, когда он используется для упорядочивания элементов с учетом определенного значения. Как правило, адаптивный дизайн достигается путем поиска конкретных точек и последующего индивидуального написания их логики. С calc() — мы можем добиться адаптивного layout только с одной спецификацией, что делает его намного более удобным.
Давайте рассмотрим конкретный пример использования display: flex;. Наша цель — создать рядом 3 элемента, зависящих от ширины контейнера (100%). Мы также хотим добавить отступ в 30 пикселей между каждым элементом, и, конечно же, нам необходимо, чтобы они были отзывчивыми!
Пример кода:
Перейдите на сайт оригинальной статьи (ссылка в начале статьи через "How to Use CSS Math Functions: calc, min, max, clamp") или на codepen (ссылка через "пример кода"), и там вы сможете изменить размер экрана, чтобы увидеть, как это работает.
Поскольку мы хотим иметь отступ в 30px между каждым элементом, мы вычитаем 90 пикселей из ширины контейнера (100%) и делим его на 3, чтобы указать, сколько элементов у нас есть.
Когда вы измените размер приведенного выше результата, вы заметите, что все элементы соблюдают соответствующий отступ, оставаясь при этом чувствительными к ширине контейнера. Неплохо.
min()
Функция min() используется для установки наименьшего допустимого значения. Она принимает два разных значения, разделенных запятой, и поддерживает арифметические выражения.
Допустим, вы указали font-size: min(25px,1vw); — в этом примере font-size никогда не будет больше 25 пикселей и будет уменьшаться до 1vw в зависимости от размера viewport.
Мы также можем использовать min() для управления шириной элементов контейнера.
Пример кода:
Перейдите на сайт оригинальной статьи (ссылка в начале статьи через "How to Use CSS Math Functions: calc, min, max, clamp") или на codepen (ссылка через "пример кода"), попробуйте изменить размер экрана.
В этом контексте div элемент внутри нашего контейнера не может превышать 800 пикселей в ширину, несмотря на то, что контейнер имеет максимальную ширину 1000 пикселей.
max()
Функция max() позволяет нам сделать прямо противоположное. Из двух значений, которые мы указываем внутри max() — большее из них будет иметь приоритет.
Пример кода:
Перейдите на сайт оригинальной статьи (ссылка в начале статьи через "How to Use CSS Math Functions: calc, min, max, clamp") или на codepen (ссылка через "пример кода"), попробуйте изменить размер экрана на меньший, чтобы посмотреть, что произойдет.
Как видите, контейнер соблюдает width: 100%;, но не опускается ниже указанной отметки 200 пикселей, так как это самое большое значение для контейнера.
Функция max() особенно полезна при применении адаптивных margins. Как правило, когда вы используете множество мелких элементов в макете, они загромождают экран после изменения размера. С помощью max() мы можем установить приоритет для определенного margin, чтобы учесть ширину контейнера.
Пример кода:
Перейдите на сайт оригинальной статьи (ссылка в начале статьи через "How to Use CSS Math Functions: calc, min, max, clamp") или на codepen (ссылка через "пример кода"), попробуйте изменить размер экрана на меньший, чтобы посмотреть на это в действий.
Как видите, несмотря на изменение ширины viewport, кнопки всегда сохраняют свои поля в 4 пикселя.
clamp()
Функция clamp() используется для определения допустимого диапазона различных значений элемента макета: minimum, preferred и maximum. Чаще всего clamp() используется для установки диапазона допустимых значений в типографике, чтобы создать эффект fluid typography.
По сути, это кульминация функций min() и max().
Например:
font-size: clamp(1rem, 4vw + 1rem, 4rem);
И вот как это выглядит:
В этом контексте, мы стилизуем наш заголовок h2 с минимальным значением 1rem, максимальным 4rem и устанавливаем предпочтительный размер 4vw (единицы viewport) + 1rem. Как вы уже заметили, из приведенного выше демо, по мере изменения области просмотра изменяется и размер шрифта заголовка.
На этом мы заканчиваем знакомство с наиболее широко поддерживаемыми математическими функциями в CSS.
Следующий раздел полностью посвящен примерам и различным вариантам использования этих функций. В целом, мы сосредоточены на создании адаптивных элементов дизайна, которые в противном случае пришлось бы писать с помощью медиа-запросов.
Создание адаптивного sidebar с помощью Grid
Можете ли вы реализовать полнофункциональный адаптивный sidebar всего двумя строками CSS? Конечно.
Для этого демо мы создадим адаптивный sidebar, используя display: grid; и настроим отзывчивость с помощью grid-template-columns. В частности, мы будем использовать функции fit-content и minmax() для установки наших ограничений.
Пример кода:
Перейдите на сайт оригинальной статьи (ссылка в начале статьи через "How to Use CSS Math Functions: calc, min, max, clamp") или на codepen (ссылка через "пример кода"), попробуйте изменить размер экрана, чтобы посмотреть, что произойдет.
Давайте разберемся, что здесь происходит.
Сначала, мы применяем fit-content, чтобы объявить предпочтительный размер нашего sidebar. Значение, которое мы указываем здесь, будет либо увеличивать боковую панель (в зависимости от размера viewport), либо уменьшать ее на небольших экранах. Все время учитывая количество контента, которое у вас есть на боковой панели.
После этого мы применяем minmax(), потому что мы не хотим, чтобы боковая панель перекрывалась областью контента на странице. В нашем случае для параметра установлено значение 55vw, которое будет использоваться для мобильного дисплея, и 35ch, которое будет использоваться для больших viewports. И, наконец, мы применяем the Grid-specific fraction unit, чтобы заполнить пространство, когда это позволяет viewport.
Применение адаптивного Gap для Flexbox Layouts
Это аналогичный пример адаптивного padding, который мы рассматривали ранее. Но для этого демо мы используем flexbox и свойство gap вместе с clamp().
Пример кода:
Перейдите на сайт оригинальной статьи (ссылка в начале статьи через "How to Use CSS Math Functions: calc, min, max, clamp") или на codepen (ссылка через "пример кода"), попробуйте поиграть с размером.
Указав gap: clamp(5px, 1vw, 25px); мы говорим браузеру адаптировать gap между каждой колонкой в зависимости от размера viewport. Итак, если размер окна превышает 1vw — gap увеличивается до 25 пикселей, тогда как маленький viewport уменьшит его до 5 пикселей (например, на мобильных устройствах).
Кстати, вы могли заметить, что я использовал интересное свойство для центрирования блоков, это place-content: center;. Это сокращенное свойство, которое поддерживает позиционирование содержимого в различных направлениях. Подробнее об этом можно прочитать на MDN.
Can I Use: Поддержка тут как тут
Если мы посмотрим на данные Can I Use для математических функций — поддержка явно есть. IE их не поддерживает, но мы также знаем, что IE прекращает работу. В июне 2022 года, если быть точным.
Использование математических функции CSS с переменными
Итак, одна из вещей, которая не была затронута в этом руководстве, — это использование переменных CSS вместе с различными функциями. Мои рассуждения довольно просты, это практическое введение в использование математических функций для адаптивного дизайна.
Я не следую style guide и не работаю над фреймворком.
Но вполне возможно использовать объявления переменных для достижения еще больших результатов, особенно для сложных структур layout.
Заключение
Были бы вы рады попробовать некоторые из этих концепций в своем следующем проекте?
Я должен сказать, что CSS прошел долгий путь с начала 2010-х годов. На самом деле, если мы сможем делать большую часть наших адаптивных стилей без медиа-запросов, это привлечет еще больше разработчиков, которые хотят писать код и не беспокоиться о совместимости между различными устройствами.
Спасибо за прочтение этой статьи!
Наш телеграм https://t.me/havaevau_webstudy
