Кастомные свойства в CSS. Часть 1: что это такое и как работает

Рассказывает команда веб-факультета Яндекс.Практикума

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

Мы подготовили для вас три статьи о кастомных свойствах в CSS. Из них вы узнаете, что такое кастомные свойства и зачем они нужны, чем они отличаются от свойств в Sass, и какие есть ограничения при работе с кастомными CSS-свойствами. Чтобы разобраться в этом, вам понадобится знание CSS и основ JavaScript. В статьях мы разбираем простые примеры, которые помогут вам понять основы работы с кастомными свойствами.

Кастомные свойства или CSS-переменные?

Многие называют их CSS-переменными. Говоря «переменная», возникает вопрос о типах данных, которые в ней хранятся. Подразумевают, что в переменных могут храниться те типы данных, которые существуют в конкретном языке программирования. Но в CSS всё не так. В CSS есть много разных типов данных: от текста до цветов и единиц измерения. В переменных можно записать код цвета или размер элемента, но сохранятся эти данные как строки. Это накладывает ряд ограничений на разработчика при использовании кастомных свойств там, где важен тип данных. Например, в медиа-запросах. Именно поэтому мы используем термин «пользовательские» или «кастомные» свойства, принятый в документации.

Синтаксис

Кастомные свойства позволяют сконфигурировать будущий макет ещё до начала разработки компонентов. Верстальщик получает от дизайнера вместе с макетом набор правил, по которым будет выстраиваться палитра сайта, типографика, сетка. До появления кастомных свойств верстальщики использовали препроцессоры, чтобы изначально задать подобную систему в коде и следовать принципу «DRY» (Don’t Repeat Yourself с англ. «не повторяйся»). Они сохраняли набор этих правил в отдельные Sass- или Less-переменные, писали миксины и в целом применяли комплекс мер по оптимизации своей работы и структурированию кода. Это круто и удобно, но требует последующей компиляции в CSS, ведь этот язык понимает браузер.

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

			:root {
    --color-black: #1e1e1e;
    --color-white: #fff;
}
		

В этом коде мы определили два кастомных свойства с именами --color-black и --color-white и присвоили им значения. Эти свойства определены для селектора :root — корневого элемента документа. Для HTML-документа :root — это элемент html, а для SVG — svg. Важно, что кастомные свойства работают и с HTML-документами, и с SVG.

Определив кастомное свойство на уровне корневого элемента, можно обращаться к его значению по имени кастомного свойства внутри блоков CSS, атрибутов style в HTML или атрибутов SVG-документа.

Синтаксис, которым нужно пользоваться:

			.block {
    /* ключевое слово var даёт браузеру понять, что нужно искать кастомное свойство 
    с именем в скобках. Это работает в CSS, HTML, SVG */
    color: var(--color-black);
}
		

Можно даже вынести настройки палитры в отдельный файл, чтобы хранить там всю глобальную конфигурацию. В примере мы вынесли глобальные кастомные свойства в файл palette.css , а значения использовали в CSS- и SVG-элементах:

Эти принципы должны быть вам знакомы, если вы использовали переменные в препроцессорах. Но почувствуйте разницу: вы работаете нативно, можете использовать кастомные свойства внутри атрибутов HTML и SVG.

Зачем это всё нужно?

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

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

Поддержка браузерами

Поддержка браузерами очень хорошая. Правда, если вам нужно поддерживать Internet Explorer, от кастомных свойств, вероятно, придётся отказаться или для IE11 воспользоваться полифилом. Его работа основана на поддержке этим браузером специфического синтаксиса для кастомных свойств. В этой статье мы не будем рассматривать этот подход. Сфокусируемся на том, что является стандартом в работе с кастомными свойствами. В ваших проектах полифил может стать неплохим решением, но учитывайте, что он немало весит и гарантированно замедлит сайт, так как будет искать циклом на JavaScript все элементы, на которые воздействуют кастомные свойства.

Поддержка кастомных свойств браузерами. Источник: caniuse.com

Тем не менее, для браузеров, которые не поддерживают кастомные свойства, можно создавать фоллбэки:

			.block {
    color: #1e1e1e; /* эту строчку прочитает IE */
    color: var(--color-black); /* а эту строку IE проигнорирует, а браузеры с 
                               поддержкой кастомных свойств выполнят инструкцию */
}
		

Создание фоллбэков можно автоматизировать плагином postcss-custom-properties при постпроцессинге через POSTCSS. Этот плагин проставит фоллбэки за вас, если кастомные свойства заданы на уровне корневого элемента. Если же кастомные свойства заданы на уровне отдельных блоков, у POSTCSS возникают проблемы. Расскажем об этом в следующей статье.

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

			.block {
    color: var(--color-black, #1e1e1e);
}
		

В этом примере свойство color будет ожидать на вход значение от кастомного свойства --color-black, а если не получит его, применит альтернативное значение #1e1e1e. POSTCSS знает такой синтаксис и сможет создать на основе альтернативного значения фоллбэк для старых браузеров.

Так выглядит наш пример, если задать все необходимые фоллбэки. Обратите внимание, что свойство fill для svg-иконки мы вынесли из HTML-атрибута в CSS. Если раньше мы старались показать, как по-разному можно использовать кастомные свойства, то теперь организовали код так, чтобы создание фоллбэков можно было автоматизировать одним POSTCSS-плагином.

Реактивность и управление через JavaScript

Кастомные свойства — часть CSS и консистентная часть веб-платформы. Поэтому JavaScript имеет доступ к управлению кастомными свойствами напрямую. Это позволяет просто решать задачи темизации. Изменив значение кастомного свойства, весь созависимый с ним CSS реактивно изменит свои значения.

Получить значение кастомного свойства через JavaScript можно в три шага:

			// Шаг 1. Получаем DOM-элемент, у которого хотим определить 
// значение кастомного свойства. В нашем случае это корневой элемент :root. 

const elem = document.documentElement;

// Шаг 2. Получаем список вычисляемых значений стилей.

const computedStyles = getComputedStyle(elem);

// Шаг 3. Получаем значение кастомного свойства методом getPropertyValue.
// В переменной сохранится #1e1e1e;

const bgColor = computedStyles.getPropertyValue('--color-black');
		

Задать значения кастомных свойств элементу можно в два шага:

			// Шаг 1. Получаем DOM-элемент, которому хотим задать значение кастомного свойства. 
// В нашем случае это корневой элемент :root.

const elem = document.documentElement;

// Шаг 2. Устанавливаем значение кастомного свойства в атрибуте style.
elem.style.setProperty('--color-black', '#000');
		

Когда исполнится второй код, моментально поменяется цвет всех элементов, для которых указана связь с кастомным свойством --color-black. Тем не менее для практических задач темизации подобная мутация палитры не обоснована. Палитра представляется нам как единая и неизменная конфигурация, содержащая весь набор цветов, которые используются в приложении. Поэтому на практике для темизации удобнее создать отдельный «слой» кастомных свойств. Он будет отвечать за свойства элементов на странице, а не за цвета, используемые на сайте. Но каждое кастомное свойство в этом «слое» будет связано с определённым цветом палитры.

Простой пример:

			:root {
    /* кастомные свойства палитры */
    --color-dark: #1e1e1e;
    --color-black: #000;
    --color-light: #dde4fd;
    --color-white: #fff;
    /* кастомные свойства, которые будем использовать для темизации */
    --bg-color: var(--color-dark);
    --text-color: var(--color-white);
}
		

Такое разделение кастомных свойств на палитру и слой темизации решает две задачи:

1. Сохраняет палитру единым конфиг-файлом для стилей сайта.
2. Обеспечивает понятность написания кода в дальнейшем.

Второй пункт лучше проиллюстрировать. Рассмотрим два примера.

На CSS:

			.block {
    background-color: var(--bg-color, #1e1e1e);
    color: var(--text-color, #fff);
}
		

На JavaScript:

			const elem = document.documentElement;
elem.style.setProperty('--bg-color', 'var(--color-light)');
elem.style.setProperty('--text-color', 'var(--color-black)');
		

Вместо изменения палитры, мы преобразовываем кастомные свойства уровня темизации, меняем связь между свойствами элементов страницы и цветами палитры. Читая JavaScript-код, сразу понятно, что мы делаем фон светлым, а текст — чёрным. Если не вводить отдельный слой кастомных свойств для темизации, мы можем получить что-то подобное:

			elem.style.setProperty('--color-white', '#000');
		

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

Доработаем наш пример про отсутствие вечеринок — добавим переключатель темы с тёмной на светлую. Задачу будем решать «в лоб», чтобы было понятно.

В примере мы разложили кастомные свойства на отдельные файлы — palette.css и theme-config.css , чтобы ещё сильнее разделить наши слои по смыслу. Скрипт theme-changer.js работает прямолинейно: создаёт две отдельные функции на каждую из тем страницы. Это не самое универсальное решение, но оно отлично демонстрирует основу работы с кастомными свойствами.

Заключение

В этой статье вы познакомились с основами использования кастомных свойств. Этой базы достаточно, чтобы начать экспериментировать. Уже после прочтения статьи вы могли заметить сильные стороны кастомных свойств: реактивность, доступ из JS и нативную реализацию необходимой функциональности. Но это далеко не все преимущества.

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