Опубликовано: 12 июля 2024 г.
Будьте готовы к усилению CSS! Правило @property
, входящее в состав API-интерфейсов CSS Houdini, теперь полностью поддерживается во всех современных браузерах. Эта революционная функция открывает новые уровни контроля и гибкости для пользовательских свойств CSS (также известных как переменные CSS), делая ваши таблицы стилей более умными и динамичными.
Преимущества @property
- Семантическое значение: используйте
@property
, чтобы определить тип (синтаксис) ваших пользовательских свойств. Это сообщает браузеру, какие данные содержит ваше пользовательское свойство (например, цвета, длины или числа), предотвращает неожиданные результаты и поддерживает новые возможности, такие как анимация градиентов. - Резервные значения: больше никаких исчезающих стилей! Используйте
@property
, чтобы установить начальное значение для пользовательского свойства. Если позже будет присвоено недопустимое значение, браузер корректно использует заданный вами резервный вариант. - Улучшенная обработка ошибок. Повышенная безопасность типов и возможность установки резервных вариантов открывают новые возможности для тестирования и проверки непосредственно в CSS.
Создание расширенных пользовательских свойств
Чтобы создать «стандартное» настраиваемое свойство, задайте имя свойства, добавленное знаком --
и присвойте этому свойству значение. Значение этих пользовательских свойств анализируется браузером как строка.
В следующем примере показано, как инициализируется настраиваемое свойство по умолчанию (строковое).
:root {
--myColor: hotpink;
}
Чтобы воспользоваться преимуществами этих «расширенных пользовательских свойств», включая семантику за пределами строки, зарегистрируйте свое пользовательское свойство CSS с помощью @property
.
В этом примере то же самое пользовательское свойство инициализируется с помощью @property
.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
Пользовательское свойство, инициализированное с помощью @property
предоставляет гораздо больше деталей, чем просто имя и значение. Он включает тип синтаксиса и устанавливает для наследования значение true или false.
Преимущество этого подхода заключается в том, что при использовании стандартного свойства вы ожидаете, что это свойство будет содержать цвет в качестве значения, и собираетесь использовать этот цвет в другом месте таблицы стилей. Если кто-то обновит это свойство, чтобы оно имело числовое значение, любое использование этого свойства в другом месте не удастся. При использовании @property
определяется резервный цвет, а также syntax
, который объявляет, что это свойство должно содержать значение цвета. Если используется значение, не являющееся цветом, вместо него будет использоваться резервное значение.
Демо: Мерцающий градиентный фон
Одним из изящных применений @property
является плавная анимация свойств, переход которых ранее был невозможен, например градиентов, которые браузер воспринимает как изображения. Однако если вы придадите переменным синтаксическое значение через @property
, их можно будет использовать в инструкции градиента. Теперь вы описываете анимацию между двумя объявленными значениями внутри градиента, включая анимацию. Возьмем следующий пример: карточка с тонкой фоновой анимацией, состоящей из двух радиальных градиентов, которые меняют цвет на разных временных шкалах:
Этого можно добиться, настроив значения пользовательских свойств в виде цветов:
@property --card-bg {
syntax: "<color>";
inherits: false;
initial-value: lavender;
}
@property --shine-1 {
syntax: "<color>";
inherits: false;
initial-value: wheat;
}
@property --shine-2 {
syntax: "<color>";
inherits: false;
initial-value: lightpink;
}
Затем вы получаете к ним доступ, чтобы создать исходный градиентный фон:
.card {
background: radial-gradient(
300px circle at 55% 60% in oklab,
var(--shine-2), transparent 100% 100%),
radial-gradient(farthest-side circle at 75% 30% in oklab,
var(--shine-1) 0%, var(--card-bg) 100%);
}
Кроме того, вы затем обновляете значения в ключевых кадрах:
@keyframes animate-color-1 {
to {
--shine-1: orange;
}
}
@keyframes animate-color-2 {
to {
--shine-2: hotpink;
}
}
И анимируем каждый:
animation: animate-color-1 8s infinite linear alternate, animate-color-2 1s infinite linear alternate;
Заключение
Зарегистрированные пользовательские свойства CSS — это очень мощная функция, которая расширяет язык CSS, предоставляя значение и контекст переменным CSS. Теперь, когда @property
стал базовым, эта суперсила CSS становится все сильнее.