Более умные пользовательские свойства с новым API Houdini

Переходы и защита данных в CSS

Sam Richard

Пользовательские свойства CSS, также известные как переменные CSS, позволяют определять собственные свойства в CSS и использовать их значения во всем CSS. Хотя они невероятно полезны сегодня, у них есть недостатки, которые могут затруднить работу с ними: они могут принимать любое значение, поэтому их можно случайно переопределить чем-то неожиданным, они всегда наследуют свои значения от родителя, и вы не можете их перенести. С помощью CSS Properties and Values API Level 1 от Houdini, который теперь доступен в Chrome 78, эти недостатки устранены, что делает пользовательские свойства CSS невероятно мощными!

Что такое Houdini?

Прежде чем говорить о новом API, давайте кратко поговорим о Гудини. Рабочая группа CSS-TAG Houdini Task Force, более известная как CSS Houdini или просто Houdini, была создана, чтобы "разрабатывать функции, которые объясняют "магию" стилей и макетов в интернете". Набор спецификаций Houdini предназначен для того, чтобы открыть возможности механизма рендеринга браузера, позволяя как глубже понять наши стили, так и расширить наш механизм рендеринга. Благодаря этому вы можете использовать типизированные значения CSS в JavaScript, а также полифиллинг и новые свойства CSS без ущерба для производительности. Houdini может дать мощный толчок творчеству в интернете.

CSS Properties and Values API Level 1

CSS Properties and Values API Level 1 (Houdini Props and Vals) позволяет нам структурировать наши пользовательские свойства. Вот как обстоят дела с использованием дополнительных параметров:

.thing {
  --my-color: green;
}

Поскольку у пользовательских свойств нет типов, они могут быть переопределены неожиданным образом. Например, рассмотрим, что произойдет, если вы определите --my-color с помощью URL.

.thing {
  --my-color: url('not-a-color');
  color: var(--my-color);
}

Поскольку тип --my-color не указан, браузер не знает, что URL не является допустимым значением цвета. В этом случае используются значения по умолчанию (черный для color, прозрачный для background). С помощью Houdini Props and Vals можно зарегистрировать дополнительные свойства, чтобы браузер знал, какими они должны быть.

Теперь дополнительный параметр --my-color зарегистрирован как цвет. Это сообщает браузеру, какие значения разрешены и как он может вводить и обрабатывать это свойство.

Как устроено зарегистрированное свойство

Регистрация ресурса выглядит следующим образом:

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

Поддерживаются следующие параметры.

name: string

Название дополнительного параметра.

syntax: string

Как анализировать дополнительный параметр. Полный список возможных значений приведен в спецификации CSS Values and Units. Значение по умолчанию – *.

inherits: boolean

Наследует ли он значение родительского элемента. Значение по умолчанию – true.

initialValue: string

Начальное значение дополнительного параметра.

Изучаю данные о компании "syntax"… Существует ряд допустимых вариантов, от чисел до цветов и типов <custom-ident>. Эти синтаксисы также можно изменить, используя следующие значения:

  • Добавление + означает, что он принимает список значений этого синтаксиса, разделенных пробелами. Например, <length>+ – это список длин, разделенных пробелами.
  • Добавление# означает, что параметр принимает список значений, разделенных запятыми. Например, <color># – это список цветов, разделенных запятыми.
  • Символ | между синтаксическими конструкциями или идентификаторами означает, что можно использовать любой из указанных вариантов. Например, <color># | <url> | magic позволяет указать список цветов через запятую, URL или слово magic.

Gotchas

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

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

Анимация пользовательских свойств

Зарегистрированное пользовательское свойство предоставляет забавный бонус, помимо проверки типов: возможность его анимации! Простой пример анимации выглядит так:

<script>
CSS.registerProperty({
  name: '--stop-color',
  syntax: '<color>',
  inherits: false,
  initialValue: 'blue',
});
</script>

<style>
button {
  --stop-color: red;
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}
</style>

При наведении указателя мыши на кнопку она будет менять цвет с красного на зеленый. Без регистрации свойства оно будет переходить от одного цвета к другому, потому что без регистрации браузер не знает, чего ожидать между одним значением и следующим, и поэтому не может гарантировать возможность их перехода. Но это ещё не всё. Вы можете анимировать градиенты CSS. Следующий CSS можно написать с тем же зарегистрированным свойством:

button {
  --stop-color: red;
  background: linear-gradient(var(--stop-color), black);
  transition: --stop-color 1s;
}

button:hover {
  --stop-color: green;
}

Это анимирует наше пользовательское свойство, которое является частью linear-gradient, и, следовательно, анимирует наш линейный градиент. Посмотрите Codepen ниже, чтобы увидеть полный код в действии и поэкспериментировать с ним самостоятельно.

Заключение

Houdini уже на пути к браузерам, а вместе с ним и совершенно новые способы работы с CSS и его расширения. С появлением Paint API, а теперь и Custom Props and Vals, наш набор инструментов для создания креативов расширяется. Теперь мы можем определять типизированные свойства CSS и использовать их для создания и анимации новых интересных дизайнов. В очереди проблем Houdini есть и другие функции, где вы можете оставить отзыв и узнать, что будет дальше с Houdini. Houdini существует для разработки функций, которые объясняют "магию" стилизации и макета в Интернете, так что выходите и используйте эти волшебные функции с пользой.