27 апреля 2021

Начинаем работу с CSS Custom Properties

Перевод. Источник – https://piccalil.li/

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

Допустим, у вас есть такой CSS:

h1 {
  background: goldenrod;
}

p {
  color: goldenrod;
}

.my-element {
  border: 1px dotted goldenrod;
}

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

:root {
  --primary: goldenrod;
}

h1 {
  background: var(--primary);
}

p {
  color: var(--primary);
}

.my-element {
  border: 1px dotted var(--primary);
}

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

Основы

Давайте начнем с рассмотрения основ. Запись custom property в CSS представляет собой традиционную пару свойства и значения (CSS декларацию). Эти декларации определены внутри правила CSS.

:root {
  --text-color: rebeccapurple;
}

К вашему сведению

Что, черт возьми, такое :root? Это псевдокласс, который представляет корневой элемент дерева документа, что в большинстве случаев означает элемент <html>. Однако, если вы находитесь в Custom Element, используя shadow DOM, :root будет представлять корневой элемент shadow DOM вместо элемента <html>.

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

С помощью комбинации объявленного custom property и функции var() мы можем использовать их в CSS для применения значений, например:

:root {
  --text-color: rebeccapurple;
}

h1 {
  color: var(--text-color);
}

See the Pen Getting started with custom properties: 1 by Piccalilli (@piccalilli) on CodePen.

Значение по умолчанию (fallback)

Если значение custom property не определено или недействительно, вместо него будет использоваться начальное или унаследованное значение. Это может привести к тому, что интерфейс будет выглядеть довольно паршиво, поэтому рекомендуется добавлять значение по умолчанию в функцию var().

h1 {
  color: var(--text-color, royalblue);
}

Если передать второе, резервное значение, <h1> станет royalblue, если свойство --text-color не было определено.

Сustom property очень удобны, но они не используются браузерами, которые их не поддерживают. Для микроскопической части браузеров, не поддерживающих custom property, можно использовать эти свойства в качестве прогрессивного улучшения, например, вот так.

h1 {
	color: royalblue;
  color: var(--text-color, royalblue);
}

Нам все равно нужно передать значение по умолчанию функции var(), потому что, как мы только что узнали, недопустимое значение, включающее неопределенные custom property, приведет к использованию initial или унаследованного значения.

See the Pen Getting started with custom properties: 2 by Piccalilli (@piccalilli) on CodePen.

Нужен быстрый сайт на JAMstack?

Наймите нас

Custom properties вычисляются

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

В качестве контекста возьмем первый пример:

:root {
  --text-color: rebeccapurple;
}

h1 {
  color: var(--text-color);
}

Если бы этот <h1> находился внутри <article> с классом .colour-change, который имеет правило CSS, объявляющее значение для --text-color:, то это значение было бы применено.

:root {
  --text-color: rebeccapurple;
}

h1 {
  color: var(--text-color);
}

article.colour-change {
  --text-color: seagreen;
}

Этот CSS применяется потому, что .article.colour-change имеет более высокую специфичность, чем :root.

See the Pen Getting started with custom properties: 3 by Piccalilli (@piccalilli) on CodePen.

Вы можете установить custom property с помощью JavaScript

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

const article = document.querySelector('article');
const button = document.querySelector('button');

button.addEventListener('click', (evt) => {
  article.style.setProperty('--text-color', 'tomato');
});

See the Pen Getting started with custom properties: 4 by Piccalilli (@piccalilli) on CodePen.

<article> получает значение для --text-color, примененное в его атрибуте style, что дает ему гораздо более высокую специфичность, чем у :root.

Итоги

Мы надеемся, что это краткое введение в CSS Custom Properties дало вам знания и уверенность для их дальнейшего изучения. Если вы хотите узнать о них больше, я рекомендую следующие ресурсы:

MDN: использование custom property
Piccalilli: плавная типографика с CSS clamp
Every Layout: модульная шкала
Piccalilli: получение значения CSS custom property с помощью JavaScript
Utopia: гибкие настраиваемые свойства
CSS-Tricks: все, что вам нужно знать о переменных CSS
Piccalilli: утилита Flow CSS

Ищете JAMstack разработчика?