Пользовательские свойства

Допустим, вы разрабатываете начальные стили для своего сайта и обнаружили, что некоторые значения в CSS повторяются. Вы используете dodgerblue в качестве основного цвета и добавляете его к границам кнопок, тексту ссылок, фону заголовков, а также используете инструмент дизайна, чтобы выбрать несколько вариантов этого синего цвета для других элементов сайта. Затем вы получаете руководство по стилю, и основной цвет теперь oklch(70% 0.15 270) .

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

Создание свойств

Самый простой способ создать свойство — задать значение новому свойству с указанным вами именем.

.card {
  --base-size: 1em;
}

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

К этому свойству можно получить доступ с помощью функции var() . В этом примере размер шрифта в .card-title задаётся вдвое больше значения --base-size .

.card .card-title {
  font-size: calc(2 * var(--base-size));
}

Использование пользовательского свойства

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

Запасные варианты

Что произойдёт, если вы попытаетесь использовать пользовательское свойство, для которого не задано значение? Функция var() принимает второе значение, которое будет использоваться в качестве резервного. Резервным значением может быть даже другое пользовательское свойство с вложенным var() .

#my-element {
  background: var(
    --alert-variant-background,
    var(--alert-primary-background)
  );
}

Недопустимые значения

Если пользовательское свойство возвращает недопустимое значение, например, значение 1em для свойства background-color , другие допустимые объявления этого элемента для этого свойства использоваться не будут. Это связано с тем, что браузер не может определить, является ли значение недопустимым, пока не отменит другие объявления при вычислении значения. Вместо этого будет использовано унаследованное или начальное значение.

.content {
  background-color: blue;
}

.content.invalid {
  --length: 2rem;
  background-color: var(--length);
}

В предыдущем примере элемент .invalid не будет иметь синий фон. Вместо этого, поскольку background-color не наследуется, значение будет transparent , что и является его начальным значением.

Переопределение и наследование

Чаще всего вам понадобится поведение пользовательских свойств по умолчанию, то есть наследование значений. Когда вы задаёте новое значение для свойства, этот элемент и все его дочерние элементы будут использовать это значение, пока оно не будет переопределено другим значением.

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

Больше контроля с @property

Пользовательское свойство, создаваемое путём установки значения, может быть любого типа и наследуется. Для большего контроля над пользовательским свойством можно использовать правило @property .

Наше свойство --base-size созданное ранее, будет эквивалентно этому объявлению @property .

@property --base-size {
  syntax: "*";
  inherits: true;
  initial-value: 18px;
}

Значение syntax задаёт типы CSS-значений , допустимые для свойства. Если задать для этого свойства другой тип, оно станет недействительным и будет возвращено к исходному значению или унаследованному значению, заданному выше в каскаде.

При создании пользовательского свойства с помощью @property можно отключить наследование с помощью inherit: false . Переопределение значения пользовательского свойства с отключенным наследованием изменяет его для выбранного элемента, но не для его дочерних элементов. Это часто полезно, когда несколько селекторов указывают на один и тот же элемент.

initial-value задаёт значение свойства, если оно не будет изменено позже. Если синтаксис не * , то есть не любой тип CSS, @property должен задавать initial-value . Это гарантирует, что свойство всегда будет иметь значение с указанным синтаксисом и никогда не станет неопределённым.

Обновление пользовательских свойств с помощью JavaScript

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

const element = document.getElementById("my-button");
getComputedStyle(element).setPropertyValue("--color", orange);

В этом примере обновляется тег стиля элемента #my-button , и его проверка в DevTools показывает:

<button id="my-button" style="--color: orange">Click me</button>

В предыдущем примере показано, как задать пользовательские свойства, обращаясь к данным, хранящимся в пользовательских HTML-атрибутах . Каждая кнопка имеет атрибут data-color со значением определённого цвета. Пользовательское свойство --background , заданное для элемента body, сбрасывается до значения data-color при каждом нажатии кнопки.

Вы также можете использовать getComputedStyle(element).getPropertyValue("--variable") для получения значения свойства конкретного элемента. Это может быть полезно, если ваша логика должна реагировать на каскадное значение.