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

Уна Кравец

CSS Houdini — это обобщающий термин, который охватывает набор низкоуровневых API, которые раскрывают части движка рендеринга CSS и предоставляют разработчикам доступ к объектной модели CSS. Это огромное изменение для экосистемы CSS, поскольку оно позволяет разработчикам сообщать браузеру, как читать и анализировать пользовательский CSS, не дожидаясь, пока поставщики браузеров предоставят встроенную поддержку для этих функций. Так волнительно!

Одним из самых интересных дополнений к CSS в рамках Houdini является API свойств и значений .

Этот API расширяет возможности ваших пользовательских свойств CSS (также часто называемых переменными CSS), придавая им семантическое значение (определяемое синтаксисом) и даже резервные значения, что позволяет проводить тестирование CSS.

Написание пользовательских свойств Houdini

Вот пример установки пользовательского свойства (представьте себе: переменную CSS), но теперь с синтаксисом (типом), начальным значением (откатом) и логическим наследованием (наследует ли оно значение от своего родителя или нет?). Текущий способ сделать это — через CSS.registerProperty() в JavaScript, но в поддерживающих браузерах вы можете использовать @property :

Отдельный файл JavaScript (Chromium 78) 
CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});
Включено в файл CSS (Chromium 85) 
@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

Теперь вы можете получить доступ --colorPrimary как и к любому другому пользовательскому свойству CSS, через var(--colorPrimary) . Однако разница здесь в том, что --colorPrimary не просто читается как строка. Он содержит данные!

Резервные значения

Как и в случае с любым другим пользовательским свойством, вы можете получать (используя var ) или устанавливать (записывать/переписывать) значения, но в случае с пользовательскими свойствами Houdini, если вы устанавливаете ложное значение при его переопределении, движок рендеринга CSS отправит начальное значение (его резервное значение) вместо того, чтобы игнорировать строку.

Рассмотрим пример ниже. Переменная --colorPrimary имеет initial-value magenta . Но разработчик присвоил ей недопустимое значение "23". Без @property парсер CSS проигнорировал бы недопустимый код. Теперь парсер возвращается к magenta . Это позволяет использовать настоящие резервные варианты и тестирование в CSS. Здорово!

.card {
  background-color: var(--colorPrimary); /* magenta */
}

.highlight-card {
  --colorPrimary: yellow;
  background-color: var(--colorPrimary); /* yellow */
}

.another-card {
  --colorPrimary: 23;
  background-color: var(--colorPrimary); /* magenta */
}

Синтаксис

С функцией синтаксиса теперь можно писать семантический CSS, указав тип. Текущие типы, которые разрешены, включают:

  • length
  • number
  • percentage
  • length-percentage
  • color
  • image
  • url
  • integer
  • angle
  • time
  • resolution
  • transform-list
  • transform-function
  • custom-ident (строка пользовательского идентификатора)

Настройка синтаксиса позволяет браузеру проверять тип пользовательских свойств. Это имеет много преимуществ.

Чтобы проиллюстрировать этот момент, я покажу вам, как анимировать градиент. В настоящее время нет способа плавно анимировать (или интерполировать) между значениями градиента, поскольку каждое объявление градиента анализируется как строка.

Используя пользовательское свойство с синтаксисом "number", градиент слева показывает плавный переход между значениями остановок. Градиент справа использует пользовательское свойство по умолчанию (синтаксис не определен) и показывает резкий переход.

В этом примере процент остановки градиента анимируется от начального значения 40% до конечного значения 100% посредством взаимодействия с наведением. Вы должны увидеть плавный переход этого верхнего цвета градиента вниз.

Браузер слева поддерживает API свойств и значений Houdini, что позволяет плавно останавливать переход градиента. Браузер справа — нет. Браузер без поддержки может понимать это изменение только как строку, идущую из точки A в точку B. Нет возможности интерполировать значения, и поэтому вы не видите плавный переход.

Однако, если вы объявляете тип синтаксиса при написании пользовательских свойств, а затем используете эти пользовательские свойства для включения анимации, вы увидите переход. Вы можете создать экземпляр пользовательского свойства --gradPoint следующим образом:

@property --gradPoint {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

А затем, когда придет время его анимировать, вы сможете обновить значение с начальных 40% до 100% :

.post:hover,
.post:focus {
  --gradPoint: 100%;
}

Теперь это позволит реализовать плавный переход градиента.

Плавно переходящие границы градиента. Смотрите демо на CodePen

Заключение

Правило @property делает захватывающую технологию еще более доступной, позволяя вам писать семантически значимый CSS внутри самого CSS. Чтобы узнать больше о CSS Houdini и API свойств и значений, ознакомьтесь со следующими ресурсами:

Фото Кристиана Эскобара на Unsplash.