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

Una Kravets

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

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

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

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

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

CSS.registerProperty({
  name: '--colorPrimary',
  syntax: '<color>',
  initialValue: 'magenta',
  inherits: false
});

@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 (строка пользовательского идентификатора)

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

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

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

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

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

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

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

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

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

Заключение

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

• Гудини уже готов?
• Справочник по MDN Houdini
• Более умные пользовательские свойства с новым API Houdini
• Очередь проблем Houdini CSSWG

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