Правило @property CSS

Правило @property CSS

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

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

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

@property --myColor {
  синтаксис: "<color>";
  inherits: true;
  initial-value: lightgray;
}

Upper definition indicates --myColor Это свойство цвета, которое может наследовать значение родительского элемента, и его значение по умолчанию составляет lightgray.

Чтобы использовать пользовательские свойства в CSS, мы используем var() Функция:

body {
  background-color: var(--myColor);
}

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

• Тип проверки：Необходимо указать тип данных пользовательского атрибута, например <number>、<color>、<length>. Это предотвращает ошибки и гарантирует правильное использование пользовательских атрибутов
• Установка значения по умолчанию：Можете установить default значение для пользовательского атрибута. Это гарантирует, что если в будущем будет назначено无效ное значение, браузер будет использовать определенное резервное значение.
• Установка поведения наследования：Необходимо указать, может ли пользовательский атрибут наследовать значение от значения родительского элемента.

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

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

Простой пример @property

В следующем примере определены два пользовательских атрибута:--my-bg-color и --my-txt-color. Затем, div в background-color и color Использование пользовательских атрибутов в

Пример

@property --my-bg-color {
  синтаксис: "<color>";
  inherits: true;
  initial-value: lightgray;
}
@property --my-txt-color {
  синтаксис: "<color>";
  inherits: true;
  initial-value: darkblue;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
  color: var(--my-txt-color);
}

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

другой пример @property

В следующем примере мы используем по умолчанию пользовательские атрибуты в элементе <div>. Затем мы .fresh и .nature Преимущественно пользовательские атрибуты класса (через установку другого цвета), очень хорошее действие:

Пример

@property --my-bg-color {
  синтаксис: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: rgb(120, 180, 30);
}

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

избежание ошибок через проверку типа и резервные значения

В следующем примере мы будем .nature Значение пользовательского атрибута в классе установлено как целое число. Это недопустимо, браузер использует initial-value Резервные цвета, определенные в атрибуте (lightgray):

Пример

@property --my-bg-color {
  синтаксис: "<color>";
  inherits: true;
  initial-value: lightgray;
}
div {
  width: 300px;
  height: 150px;
  padding: 15px;
  background-color: var(--my-bg-color);
}
.fresh {
  --my-bg-color: #ff6347;
}
.nature {
  --my-bg-color: 2;
}

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

использовать значение inherits

В следующем примере мы будем inherits Значение установлено на falseЭто означает, что пользовательские атрибуты не наследуют значения от родительского элемента. Посмотрите результат:

Пример

@property --my-bg-color {
  синтаксис: "<color>";
  inherits: false;
  initial-value: lightgray;
}

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

Следующий пример будет inherits Значение установлено на trueЭто означает, что пользовательские атрибуты наследуют значения от родительского элемента. Посмотрите результат:

Пример

@property --my-bg-color {
  синтаксис: "<color>";
  inherits: true;
  initial-value: lightgray;
}

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

Создание плавной анимации с помощью @property

Использование @property Новые возможности для реализации правил, которые могут анимировать контент, ранее не анимируемый: градиент. См. следующий пример:

Пример

Для градиента определить два пользовательских свойства:

@property --startColor {
  синтаксис: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  синтаксис: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

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

Правило @property CSS