SavePearlHarbor

Основные варианты использования CSS-переменных (Custom Properties)

—

от автора

admin

CSS Variables или CSS Custom Properties уже давно используются в разработке и поддерживаются большинством популярных браузеров. Если у вас нет обязательного требования разрабатывать под IE, то вполне вероятно, вы уже успели оценить их преимущества.

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

Варианты использования

1. Определение переменных

Начнём с базовых вещей, а именно: как определять переменные. Стоит помнить, что их можно определить как в корневом элементе :root (переменные будут доступны по всему приложению), так и внутри любого селектора (будут доступны только для выбранного элемента и его дочерних элементов):

:root {     /* Определение переменной внутри корневого элемента */     --color: green; } body {     /* Определение переменной внутри селектора */     --font: 15px;     background-color: var(--color);     font-size: var(--font); }

2. Переопределение переменных

В примере показан кейс, когда при наведении на элемент, должен меняться цвет. Для этого мы переопределяем переменную --color по событию :hover:

body {     --color: green; } button {     color: var(--color); } button:hover {     --color: red; }

Второй пример показывает переопределение переменной в @media выражении. К сожалению, мы не можем вынести 1024px в переменную и использовать ее в @media — это является одним из ограничений CSS переменных.

:root {     --color: green; } body {     background-color: var(--color); } @media (max-width: 1024px) {     :root {         --color: red;     } }

3. Локальный fallback

Представьте, что вы вызываете переменную --color-green, а ее не существует. Страшного не случится, но заданное CCS-свойство не отработает. Для подстраховки можно задать резервное значение вторым аргументом. Это значение также может быть CSS-переменной:

:root {     --color-green: green;     --color-blue: blue;     --color-red: red; } body {     color: var(--color-green, blue);     color: var(--color-green, var(--color-blue));     color: var(--color-green, var(--color-blue, var(--color-red, red))); }

4. Привязка переменных

При объявлении переменных могут использоваться другие переменные:

:root {     --color1: var(--color2);     --color2: var(--color3);     --color3: red; } body {     background-color: var(--color1); }

5. Переменные в calc()

В calc() можно перемножать числа со значениями в единицах измерения, н-р: px.

На выходе получим результирующее значение в той единице измерения, на которую умножили.

В примере показано, как перемножается 2 на 10px и в итоге получается 20px. Не важно, используем мы для этого обычные значения или CSS-переменные — результат будет одинаковый:

:root {     --increment: 2;     --size: 10px; } body {     /* Будет 20px; */     font-size: calc(var(--increment) * var(--size)); }

К примеру, у нас есть переменная --font: 20. Но без указания единицы измерения мы не сможем ее корректно использовать в font-size.

Это можно решить с помощью calc(). Для преобразования числа в px, к примеру, достаточно умножить число на 1px в calc():

:root {     --font: 20; } div {     /* Будет 20px; */     font-size: calc(var(--font) * 1px); }

6. Прозрачность в цветовых функциях

Задания цвета — самый распространенный кейс использования переменных.

Вот стандартный пример по использованию hex-цвета для определения значения переменной:

:root {     /* hex формат */     --color-blue: #42c8f5; } body {     color: var(--color-blue); }

Часто бывает, что для цвета нужно задавать различную прозрачность. В CSS для этого есть:

  • rgba()

  • hsla()

  • hwb()

  • #rrggbbaa hex color notation

Использование rgba()

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

  1. Красного цвета

  2. Зеленого цвета

  3. Синего цвета

  4. Альфа-канала для задания прозрачности

На самом деле, внутри CSS допускается использовать практически всё (за небольшим исключением), даже код на JavaScript!

Поэтому, задание в переменной значения цветов для Red, Green, Blue — вполне допустимо.

:root {     /* Указание значений цветов: Red Green Blue */     --color-blue--rgb: 66, 200, 245; }

Вызовем функцию rgba() с переменной --color-blue--rgb. Для rgba() не хватает четвертого аргумента задающего прозрачность — добавим его через запятую:

body {     background-color: rgba(var(--color-blue--rgb), 0.7); }

На выходе собираются аргументы для rgba(): значения из переменной и альфа-канала.

По итогу получаем цвет:

body {     background-color: rgba(66, 200, 245, 0.7); }

Использование hsla()

Кроме rgba() можно использовать и hsla(). Это не так удобно, но как вариант, можно попробовать.

Идея следующая:

  1. Определяем переменные с базовыми значениями для основных параметров hsla(): --hue, --saturation, --lightness, --opacity.

  2. При использовании, указываем все базовые параметры в селекторе.

  3. Меняем один / несколько переменных в селекторе (изменения коснутся только данного селектора и его дочерних элементов).

:root {     --hue: 285;     --saturation: 100%;     --lightness: 60%;     --opacity: 0.7; } body {     /* Переопределяем значение для --hue */     --hue: 400;      background-color: hsla(         var(--hue),         var(--saturation),         var(--lightness),         var(--opacity)     ); }

На выходе получаем цвет:

body {     background-color: hsla(400, 100%, 60%, 0.7); }

7. Переменные в SVG

С помощь переменных мы также можем изменять цвет внутри SVG: fill или stroke. Сложность заключается в том, что изображение SVG должно быть инлайново встроено на страницу, но при использовании сборщиков — это не проблема.

Итак, имеем SVG-элемент на странице, у которого в fill указана переменная --color:

<svg class="icon">     <circle cx="50" cy="50" r="50" fill="var(--color)" /> </svg>

И саму переменную --color в CSS:

:root {     --color: green; }

Значение переменной можно переопределять при необходимых условиях: например, при событии hover на SVG:

.icon:hover {     --color: pink; }

Использование с JavaScript. API CSS Style Declaration

CSS переменные работают в runtime, в отличие переменных препроцессоров. Это значит, что мы можем получить к ним доступ в процессе работы приложения через JavaScript.

Рассмотрим, как можно работать с CSS переменными через JavaScript:

В CSS у нас есть 2 переменные:

:root {     --color: green; }

А вот код на JavaScript:

// Получаем корневой элемент в DOM const root = document.querySelector(':root');  // Получаем "Вычисленные свойства" const rootStyles = getComputedStyle(root);  // Получаем значение переменной по ее названию const color = rootStyles.getPropertyValue('--color'); // => 'green'  // Изменяем значение переменной root.style.setProperty('--color', '#88d8b0');  // Удаляем CSS переменную root.style.removeProperty('--color');

Для примера, я показал все возможные действия с переменными: чтение, изменение, удаление. Использовать операции можно по необходимости.

Вычисленные свойства

В коде выше я затронул тему «Вычисленных свойств». Рассмотрим подробнее: для этого создадим небольшой пример:

HTML-код:

<h1>Hello</h1>

CSS-код:

h1 {     font-size: 5rem; }

Единицы измерения можно подразделить на абсолютные и относительные:

  • Абсолютные — это пиксели (px), которые привязываются к разрешению экрана.

  • Относительные (н-р: rem) формируются относительно заданного параметра.

Для отображения, относительные единицы измерения должны быть преобразованы в абсолютные. Если мы откроем инспектор объектов в Google Chrome (или другом браузере) на вкладке «Elements», то сможем увидеть это преобразование:

  • В секции Styles — значения в том виде, в котором мы их указали в CSS (относительные).

  • В секции Computed — значения, приведенные к абсолютным единицам измерения. Функцией getComputedStyle в JavaScript мы как раз таки и получаем эти вычисленные значения.

Так для чего же может понадобиться работать с CSS-переменными через JavaScript? Самый распространенный кейс — это задание цветовой схемы: при переключении схемы мы обращаемся к CSS-переменной и просто изменяем ее значение. Все значения, где используется эта переменная, будут обновлены.

Небольшую демку по изменению цветовой схемы можно посмотреть здесь.

Проверка поддержки переменных

Из CSS:

@supports ( (--a: 0) ) {     /* Стили с поддержкой переменных */ } @supports ( not (--a: 0) ) {     /* Стили без поддержки переменных */ }

Из JavaScript:

if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {     // Сценарии с поддержкой переменных } else {     // Сценарии без поддержки переменных }

Достоинства и ограничения

Достоинства:

  • Работают в runtime, в отличие от переменных препроцессоров

  • Можно обратиться из JavaScript

Нельзя использовать:

  • В именах обычных свойств CSS: var(--side): 10px

  • В значениях media-запросов: @media screen and (min-width: var(--desktop))

  • В подстановке URL: url(var(--image))

Ограничения:

  • Нельзя сбрасывать значения всех переменных --: initial

Заключение

Использование CSS-переменных еще один шаг к отказу от препроцессоров. Ждем реализации миксинов @apply на CSS и CSS Nesting Module!


ссылка на оригинал статьи https://habr.com/ru/articles/589375/

Комментарии

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

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