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

Дескриптор syntax правила @property at-rule определяет допустимые типы значений для зарегистрированного пользовательского свойства CSS. Он управляет обработкой заданного значения свойства для вычисления вычисленного значения. Это обязательный дескриптор; если он отсутствует или указан неверно, всё правило @property считается недействительным и игнорируется.

Синтаксис

/* A data type name */
syntax: "<color>";

/* A '|' combinator for multiple data types */
syntax: "<length> | <percentage>";

/* Space-separated list of values */
syntax: "<color>+";

/* Comma-separated list of values */
syntax: "<length>#";

/* Keywords */
syntax: "small | medium | large";

/* Combination of data type and keyword */
syntax: "<length> | auto";

/* Universal syntax value */
syntax: "*";

Значения

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

• Одно или несколько имён компонентов синтаксиса, которыми могут быть:
  • Имена типов данных (записываются в угловых скобках, например, <color> или <length>)
  • Ключевые слова (записываются без угловых скобок, например, auto или none)
• Универсальный синтаксис *, принимающий любое допустимое значение CSS. Его нельзя умножать или сочетать с другими компонентами синтаксиса.

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

• Модификаторы + (разделение пробелами) и # (разделение запятыми) указывают, что ожидается список значений. Например, <color># означает, что ожидаемый синтаксис — это список значений <color>, разделённых запятыми.

• Вертикальная черта (комбинатор |) позволяет задавать условия «или» для ожидаемого синтаксиса. Например, <length> | auto принимает <length> или auto, а <color># | <integer># ожидает список значений <color>, разделённых запятыми, либо список значений <integer>, разделённых запятыми.

Поддерживаются следующие имена компонентов синтаксиса:

"<angle>"

Принимает любое допустимое значение <angle>.

"<color>"

Принимает любое допустимое значение color.

"<custom-ident>"

Принимает любое допустимое значение <custom-ident>.

"<image>"

Принимает любое допустимое значение <image>.

"<integer>"

Принимает любое допустимое значение <integer>.

"<length>"

Принимает любое допустимое значение <length>.

"<length-percentage>"

Принимает любое допустимое значение <length> или <percentage>, а также любое допустимое выражение calc(), объединяющее значения <length> и <percentage>.

"<number>"

Принимает любое допустимое значение <number>.

"<percentage>"

Принимает любое допустимое значение <percentage>.

"<resolution>"

Принимает любое допустимое значение <resolution>.

"<string>"

Принимает любое допустимое значение <string>.

"<time>"

Принимает любое допустимое значение <time>.

"<transform-function>"

Принимает любое допустимое значение <transform-function>.

"<transform-list>"

Принимает список допустимых значений <transform-function>. Эквивалентно "<transform-function>+".

"<url>"

Принимает любое допустимое значение <url>.

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

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

Примеры

Регистрация пользовательского свойства с проверкой типа

В этом примере показано, как определить пользовательское свойство --my-color, которое принимает только значения <color>:

@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 и initial-value
• Регистрация пользовательских свойств CSS
• CSS Properties and Values API
• CSS Painting API
• CSS Typed Object Model
• Houdini APIs