Дескриптор CSS-ат-правила `initial-value`

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

Синтаксис

/* Set initial color value */
initial-value: rebeccapurple;

/* Set initial length value */
initial-value: 16px;

Значения

Значение, соответствующее типу, указанному в дескрипторе syntax. Например, если syntax — <color>, то initial-value должно быть допустимым значением color.

Если значение дескриптора syntax не является определением универсального синтаксиса, значение дескриптора initial-value должно быть вычислительно независимым. Это означает, что значение можно преобразовать в вычисленное значение, не зависящее от других значений, за исключением «глобальных» определений, независимых от CSS. Например, 10px является вычислительно независимым — при преобразовании в вычисленное значение оно не изменяется. 2in также допустимо, поскольку 1in всегда эквивалентно 96px. Однако 3em недопустимо, поскольку значение em зависит от font-size родительского элемента.

Формальное определение

Формальный синтаксис

Примеры

Установка начального значения пользовательского свойства

В этом примере показано, как определить пользовательское свойство --my-color с начальным значением цвета #c0ffee. Это начальное значение будет использоваться, если свойство не наследуется (inherits: false) и для элемента не задано другое значение.

@property --my-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #c0ffee;
}

С помощью JavaScript CSS.registerProperty():

window.CSS.registerProperty({
  name: "--my-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "#c0ffee",
});

Спецификации

Совместимость с браузерами

См. также

• Другие дескрипторы @property: inherits и syntax
• Регистрация пользовательских свойств CSS
• API свойств и значений CSS
• API рисования CSS
• Типизированная объектная модель CSS
• API Houdini