@property: переменные CSS нового поколения теперь с универсальной поддержкой браузеров.

Una Kravets

Будьте готовы к усилению 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 становится все сильнее.

Дополнительное чтение

• Веб-документы MDN
• @property: предоставление суперспособностей переменным CSS