18.10.2021

Практическое использование функций CSS: calc, clamp, min, max

Практическое внедрение функций CSS: calc, clamp, min, max

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

calc()

Практическое предназначение calc(): выполнение основных математических операций с возможностью интерполяции меж типами единиц.

Эта математическая функция подольше всех из четырех исследуемых нами поддерживается различными браузерами. Она имеет широкий спектр применений в хоть какое время, когда вы хотите иметь возможность делать математические вычисления на стороне клиента в собственных стилях.

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

CSS

По мере конфигурации размера окна просмотра или использования юзером больших или меньших устройств значение 100vh будет динамически обновляться.

Преимущество calc() заключается в том, что вы сможете избежать жесткого кодирования диапазона магических чисел либо добавления решения JavaScript для вычисления значения, нужного для его применения в качестве встроенного стиля.

Внедрение calc() для генеративных цветовых палитр

Мы можем расширить способности calc(), передав в CSS пользовательские характеристики. Примером этого, является создание согласованной цветовой палитры с внедрением hsl() (что означает оттенок, насыщенность и яркость). Беря во внимание значения насыщенности, яркости и начального колера, мы можем вычислить дополнительные значения для сотворения полной палитры. Из-за общности значений насыщенности и яркости гамма будет казаться цельной.

CSS для примера «Внедрение calc() для создания цветовой палитры HSL»:

CSS

clamp()

Практическая цель clamp(): установить границы спектра допустимых значений. Функция clamp() принимает три значения, их порядок имеет значение. 1-ое — это самое низкое значение в вашем спектре, среднее — ваше идеальное значение, а третье — самое высочайшее значение в вашем диапазоне.

Область, в которой вы, может быть, уже сталкивались с clamp() — это эластичная типографика. Основная идея заключается в том, что значение font-size можно плавненько регулировать в зависимости от размера области просмотра. Это изготовлено для того, чтобы большие заголовки не вызывали переполнение либо занимали слишком много места в области просмотра.

Вот очень обычное определение плавного стиля h1:

CSS

Относительное наполнение с clamp()

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

В примере от SmolCSS употребляется следующее определение заполнения, в котором наполнение будет увеличиваться и уменьшаться относительно ширины элемента. Оно никогда не будет меньше 1rem и никогда не будет больше 3rem:

CSS

Может быть, вы поняли, что это удаляет некие сценарии, в которых вы могли использовать медиа-запросы. Заместо того, чтобы управлять этим интервалом на микроуровне либо беспокоиться о строгом соблюдении линейного конфигурации пикселей (например, 8, 12, 24, 36), вы сможете установить разумные рекомендации для гибкого перехода.

Более значительным преимуществом здесь по сравнению с медиа-запросами является то, что, так как это определение заполнения является относительным элементом, оно будет больше, если у элемента больше места на страничке, и меньше, если, например, он помещен в узенький столбец. Это потребует большой координации с служебными классами на базе медиа-запросов!

min()

Практическая цель min() — установка границ очень допустимого значения таким образом, чтобы окутать реагирующий контекст элемента.

Верно — несмотря на то, что это функция min(), в итоге предоставленные значения будут действовать как очень допустимое значения для свойств.

Установив значение width:min(80ch, 100vw), в большем окне просмотра будет выбрано 80ch, поэтому что это меньшее значение из 2-ух вариантов, но оно действует как максимум на базе контекстно доступного пространства. Как только область просмотра сжимается, будет употребляться 100vw, потому что оно вычисляется как меньше чем 80ch, но практически обеспечивает максимальную границу для ширины элемента.

Современный класс CSS container

Только что приведенный пример — это мой желательный способ определения container с помощью одной малеханькой настройки. Функция min() позволяет вложенные главные математические операции, а значит, мы можем использовать вычитание некого пространства в качестве замены для определения левых и правых отступов, последующим образом:

CSS

На огромных экранах, элемент может вырасти до max равно 80ch, и как только окно просмотра сжимается ниже этой ширины, она будет иметь возможность расти до 100vw — 2rem. Это определение отлично создает «отступы» 1rem по обе стороны от элемента.

В этом примере вы также сможете использовать 100% вместо vw, чтобы настроить ширину элемента в родительском контейнере. CSS для «современного класса CSS container»:

CSS

Короткое примечание: единица измерения ch равна ширине знака 0 с учетом всех текущих параметров font на момент ее применения. Это делает ee хорошим выбором для приблизительного определения длины строчки, например, для лучшего чтения.

Какая полезность? Адаптивный размер без медиа-запросов! Функция min() — моя более часто используемая математическая функция. Давайте поглядим на еще несколько удивительных улучшений практических сценариев.

Размер адаптивного элемента с помощью min()

Каждый раз, когда вы желаете изменить размер элемента, функция min() может быть хорошим выбором. Например, я исследовал использование min() для управления размером аватарки в ветке комментариев в 26-м эпизоде Modern CSS.

В примере аватарки, мы применяли три значения с разными единицами: min(64px, 15%, 10vw). Размер аватарки не будет превосходить одно из этих значений в хоть какой момент времени, при этом браузер выбирает малое вычисленное значение.

Это определение позволяет никогда не иметь аватарки больше, чем 64px. В частности, при увеличении масштаба изображение размером 10vw кажется более относительным. И 15% помогает сохранить размер относительно элемента, что может дать более зрительно привлекательный результат до применения 10vw.

Внедрение min() в других свойствах

Математические функции CSS можно использовать в большинстве параметров, допускающих числовое значение. Одно уникальное место для их использования — снутри background-size.

Почему? Возможно, вы создаете мультислойный эффект цвета фона и изображения. И заместо того, чтобы использовать значение размера cover, которое принудило бы изображение заполнять пространство, вы желали бы ограничить рост изображения. Это безупречное место для использования min().

Разглядим следующий пример, где min() используется, чтоб гарантировать, что изображение не выходит за пределы 600px, при этом изменяет собственный размер относительно ширины элемента, установив значение 100%. Другими словами, оно вырастет до 600px а потом изменит свой размер в соответствии с шириной элемента, если он меньше 600px.

CSS для примера «Управление размером фона с помощью min()»:

CSS

max()

Практическая цель max(): установить границы мало допустимого значения таким образом, чтобы окутать адаптивный контекст элемента.

Ага, max() это полная противоположность min()! Итак, сейчас мы устанавливаем определения для минимально допустимых значений. Приступим к примерам!

Контекстные отступы с max()

Узнав о аспекты успеха 1.4.10 Руководства по обеспечению доступности веб-контента (WCAG), в котором сказано, что пользователь должен иметь возможность использовать масштабирование для роста вашего сайта до 400%, я увидел, что пиксели и rems становятся второстепенной единицей в этом контексте.

Беря во внимание размер рабочего стола 1280 пикселей при масштабировании 400%, ваш контент эквивалентен устройству с разрешением 320 пикселей. Но, по сравнению с мобильным телефоном, ориентация как и раньше альбомная. Область просмотра такого размера значит значительно уменьшенную область для чтения и выполнения действий. Не считая того, размеры, которые казались подходящими для телефона, становятся намного большенными в контексте при просмотре в увеличенном окне.

К счастью, max() дает нам метод, более изящно обрабатывать поля. Я избегаю значений пикселей в работе и обычно предпочитаю rem для малых размеров. Я использую последующий пример, который позволяет относительный рост для огромных экранов и уменьшение для более малых.

CSS

На огромных экранах будет использоваться 8vh, а на наименьших или при увеличении изображения будет употребляться 2rem. Я рекомендую вам попробовать это и издержать некоторое время на тестирование на различных экранах, устройствах, а также с масштабированием макета и без него. Этот способ представляет собой небольшое обновление, которое может иметь огромное значение для конечного пользователя.

Запрет масштабирования браузера для полей ввода в iOS с помощью max()

Был ли у Вас опыт принудительного масштабирования браузера после того, как сфокусировали форму ввода на iOS? Для хоть какого ввода, размер шрифта которого меньше 16px будут последствия.

CSS

Где 1rem можно поменять на переменную Sass либо пользовательское свойство CSS. Такое использование max() гарантирует, что независимо от другого предоставленного значения, font-size будет по последней мере 16px и, следовательно, предотвращает принудительное масштабирование браузера.

Контуры относительного фокуса с max()

Я нередко использую min() для применения относительного размера контуров фокуса. Это сокращенный кусок, но, используя max(), мы гарантируем малый размер контура 2px, позволяя ему возрастать относительно элемента, используя значение, относящееся к шрифту em.

CSS

Доступные мотивированные размеры с max()

Термин «мотивированной размер» описан в критериях успеха WCAG (SC) 2.5.5, где «цель» относится к области, которая получит событие указателя (к примеру, клик мыши). В грядущей версии WCAG 2.2 SC 2.5.5 сейчас является «улучшенной» версией, минимальный размер которой составляет 44px.

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

В этих случаях мы можем использовать max() аналогично тому, как мы установили запрет для предотвращения масштабирования ввода. Мы установим 44px как одно из значений снутри max() так, чтобы это был малый размер элемента.

CSS

Следует отметить, что этот аспект также учитывает пространство вокруг элемента, которое в сочетании с фактическим размером элемента составляет не наименее 44 пикселей.

Использование max() в качестве запасного варианта для aspect-ratio

Другой метод, где я использовал max() — установить высоту изображения при использовании aspect-ratio чтоб обеспечить приемлемый опыт для браузеров, которые еще не поддерживают это свойство.

CSS

Собираем все совместно

В последней демонстрации показан пример внедрения нескольких математических функций CSS для обеспечения гибкого конфигурации размеров для нескольких свойств. Обратите внимание на комменты рядом с продемонстрированным кодом.

Дополнительные примеры использования математических функций CSS и других современных функций CSS можно отыскать в моем видео на YouTube.

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *