Правило CSS @property

Определение и использование

CSS @property Правила используются для прямого определения пользовательских свойств в таблице стилей без выполнения какого-либо JavaScript.

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

Использование @property Преимущества:

  • Проверка типа и ограничения: необходимо указать тип данных пользовательского свойства, например <number>, <color>, <length> и т.д. Это предотвращает ошибки и гарантирует правильное использование пользовательских свойств.
  • Настройка значения по умолчанию: можно установить значение по умолчанию для пользовательского свойства. Это гарантирует, что если была назначена недопустимая величина, браузер будет использовать определенное значение по умолчанию.
  • Настройка поведения наследования: необходимо указать, может ли пользовательское свойство наследоваться от родительского элемента.

Пример: определение пользовательских свойств

@property --my-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

Указанное определение означает, что --my-color - это свойство цвета, которое может наследоваться от родительского элемента, и его значение по умолчанию составляет lightgray.

Использование пользовательских свойств в CSS:

body {}}
  backgound-color: var(--my-color);
}

Пример

Пример 1

Определите два пользовательских свойства для градиента - и используйте их для анимации градиента:

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

Попробуйте сами

Пример 2

Определите два пользовательских свойства: одно для размера элемента, другое для цвета элемента:

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

Попробуйте сами

Синтаксис CSS

@property --propertyname {
  syntax: "<color>";
  initial-value: red;
  inherits: false;
}

Значение свойства

Значение Описание
--propertyname Обязателен. Название пользовательского свойства.
syntax

Это может быть <length>, <number>, <percentage>, <length-percentage>, <color>, <image>, <url>, <integer>, <angle>, <time>, <resolution>, <transform-function> или <custom-ident>, или список значений типа данных и ключевых слов.

+ (разделенные пробелом) и # (разделенные запятыми) как множители означают ожидаемый список значений, например, <color># означает ожидаемую грамматику списка значений <color>, разделенных запятыми.

竖线 (|) может создавать условие "или" для ожидаемой грамматики, например, <length> | auto принимает <length> или auto, а <color># | <integer># ожидает списка значений <color>, разделенных запятыми, или списка значений <integer>, разделенных запятыми.
initial-value Устанавливает начальное значение свойства.
inherits true или false. Управляет тем, чтобы пользовательские свойства,指定的ые с помощью @property, по умолчанию наследовались.

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

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

Chrome Edge Firefox Safari Opera
85 85 128 16.4 71

Связанные страницы

Урок:Правило CSS @property