Правило CSS @property
Пользовательские CSS-свойства (CSS-переменные) можно определять прямо в таблице стилей с помощью правила @property, без использования JavaScript.
Правило даёт вам три настройки: тип данных, значение по умолчанию и то, наследует ли свойство значения от родительских элементов.
Синтаксис @property
Здесь --myColor создаётся как свойство цвета. Наследование включено, а значение по умолчанию — lightgray.
styles.css
@property --myColor {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}
Использование пользовательского свойства
Чтобы вставить значение пользовательского свойства, вызовите функцию CSS var():
styles.css
body {
background-color: var(--myColor);
}
Преимущества использования @property
Зачем использовать @property? Это даёт три преимущества:
- Проверка типа данных: Объявление типа пользовательского свойства, например
<number>,<color>,<length>и т. д., обязательно. Это защищает от ошибок и обеспечивает правильное использование свойства. - Задание значения по умолчанию: Значение по умолчанию для пользовательского свойства тоже обязательно. Если позже будет присвоено недопустимое значение, браузер вернётся к нему.
- Задание поведения наследования: Вы также должны указать, наследует ли пользовательское свойство значения от родительских элементов, поэтому наследование полностью под вашим контролем.
Пример CSS @property
Здесь определены два пользовательских свойства, --my-bg-color и --my-txt-color, и div берёт из них цвет фона и цвет текста.
Пример
Prompt
Создайте страницу, использующую CSS @property для определения двух пользовательских свойств: --my-bg-color (lightgray) и --my-txt-color (darkblue), оба как типы цвета с наследованием. Примените их к div (300x150px, 15px padding) с помощью var().
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS @property Custom Colors</title>
<style>
@property --my-bg-color {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}
@property --my-txt-color {
syntax: "<color>";
inherits: true;
initial-value: darkblue;
}
div {
width: 300px;
height: 150px;
padding: 15px;
background-color: var(--my-bg-color);
color: var(--my-txt-color);
}
</style>
</head>
<body>
<h2>CSS @property Example</h2>
<div>This div uses custom properties for background color and text color.</div>
</body>
</html>
Ещё один пример @property
Элемент <div> сначала использует значение пользовательского свойства по умолчанию. Затем классы .fresh и .nature переопределяют его, каждый своим цветом.
Пример
Prompt
Создайте страницу с использованием CSS @property для определения --my-bg-color как цвета с initial-value lightgray и inherits true. Покажите три div (300x150px, 15px padding): один со стандартным цветом, один с классом «fresh», переопределяющим значение на #ff6347, и один с классом «nature», переопределяющим значение на rgb(120, 180, 30).
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Override @property Custom Property</title>
<style>
@property --my-bg-color {
syntax: "<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);
}
</style>
</head>
<body>
<h2>Override @property Custom Property</h2>
<div>Default (lightgray)</div>
<br>
<div class="fresh">Fresh (#ff6347)</div>
<br>
<div class="nature">Nature (rgb(120, 180, 30))</div>
</body>
</html>
Избежание ошибок с помощью проверки типа и запасного значения
Здесь класс .nature присваивает пользовательскому свойству целое число. Целое число не является допустимым цветом, поэтому браузер возвращается к initial-value (lightgray).
Пример
Prompt
Создайте страницу с использованием CSS @property для определения --my-bg-color как цвета с initial-value lightgray и inherits true. Покажите три div (300x150px, 15px padding): по умолчанию, класс «fresh» со значением #ff6347 и класс «nature» с недопустимым значением 2 (целое число). Браузер должен использовать lightgray для недопустимого значения.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Type Checking and Fallback</title>
<style>
@property --my-bg-color {
syntax: "<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;
}
</style>
</head>
<body>
<h2>Type Checking and Fallback Value</h2>
<div>Default (lightgray)</div>
<br>
<div class="fresh">Fresh (#ff6347)</div>
<br>
<div class="nature">Nature (invalid value - falls back to lightgray)</div>
</body>
</html>
Использование значения inherits
Будет ли пользовательское свойство получать значения от родительских элементов, определяет дескриптор inherits.
inherits: false
Если задать inherits значение false, пользовательское свойство перестаёт получать значения от родительских элементов. Дочерние элементы вместо этого получают начальное значение.
Prompt
Создайте страницу с использованием CSS @property для определения --my-bg-color как цвета с initial-value lightgray и inherits, установленным в false. Установите --my-bg-color в coral на body. Покажите дочерний div (300x150px, 15px padding), который использует var(--my-bg-color) в качестве фона — так как inherits равно false, div должен получить lightgray, а не coral.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@property inherits false</title>
<style>
@property --my-bg-color {
syntax: "<color>";
inherits: false;
initial-value: lightgray;
}
body {
--my-bg-color: coral;
}
div {
width: 300px;
height: 150px;
padding: 15px;
background-color: var(--my-bg-color);
}
</style>
</head>
<body>
<h2>inherits: false</h2>
<p>The body sets --my-bg-color to coral, but since inherits is false, the div gets the initial value (lightgray).</p>
<div>This div should be lightgray</div>
</body>
</html>
inherits: true
Если задать inherits значение true, пользовательское свойство может получать значения от родительских элементов.
Prompt
Создайте страницу с использованием CSS @property для определения --my-bg-color как цвета с initial-value lightgray и inherits, установленным в true. Установите --my-bg-color в coral на body. Покажите дочерний div (300x150px, 15px padding), который использует var(--my-bg-color) в качестве фона — так как inherits равно true, div должен унаследовать значение coral от body.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@property inherits true</title>
<style>
@property --my-bg-color {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}
body {
--my-bg-color: coral;
}
div {
width: 300px;
height: 150px;
padding: 15px;
background-color: var(--my-bg-color);
}
</style>
</head>
<body>
<h2>inherits: true</h2>
<p>The body sets --my-bg-color to coral, and since inherits is true, the div inherits that value.</p>
<div>This div should be coral</div>
</body>
</html>
Создание плавной анимации с @property
То, что раньше нельзя было анимировать, в том числе градиенты, становится анимируемым с помощью @property, и это делает правило особенно мощным. Когда цветовые свойства зарегистрированы таким образом, браузер знает, как плавно их интерполировать.
Пример
Здесь определены два пользовательских цветовых свойства градиента, которые затем анимируются при наведении:
Prompt
Создайте страницу, использующую CSS @property для определения двух цветовых свойств (--startColor: #EADEDB, --endColor: #BC70A4, оба с inherits false). Примените linear-gradient, используя эти свойства, к div и анимируйте оба цвета при наведении, чтобы создать плавный переход градиента, который был бы невозможен без @property.
Результат: полная HTML-страница
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Smooth Gradient Animation with @property</title>
<style>
@property --startColor {
syntax: "<color>";
initial-value: #EADEDB;
inherits: false;
}
@property --endColor {
syntax: "<color>";
initial-value: #BC70A4;
inherits: false;
}
div {
width: 300px;
height: 200px;
padding: 15px;
background: linear-gradient(to right, var(--startColor), var(--endColor));
transition: --startColor 1s, --endColor 1s;
}
div:hover {
--startColor: #6EC6FF;
--endColor: #2196F3;
}
</style>
</head>
<body>
<h2>Smooth Gradient Animation with @property</h2>
<p>Hover over the div to see a smooth gradient transition:</p>
<div>Hover me!</div>
</body>
</html>