Эта страница переведена с помощью Cloud Translation API.

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

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

Sam Richard

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

Что такое Гудини?

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

Свойства и значения CSS API уровня 1

API свойств и значений CSS уровня 1 (Houdini Props и 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 и Vals можно зарегистрировать пользовательские свойства, чтобы браузер знал, какими они должны быть!

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

Анатомия зарегистрированной собственности

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

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

Он поддерживает следующие параметры:

`name: string`

Имя пользовательского свойства.

`syntax: string`

Как разобрать пользовательское свойство. Полный список возможных значений можно найти в спецификации CSS «Значения и единицы измерения» . По умолчанию * .

`inherits: boolean`

Наследует ли он значение своего родителя. По умолчанию true .

`initialValue: string`

Начальное значение пользовательского свойства.

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

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

Ошибки

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

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

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

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

<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 , тем самым анимируя наш линейный градиент. Ознакомьтесь с ошибкой ниже, чтобы увидеть полный код в действии и поэкспериментировать с ним самостоятельно.

Заключение

Houdini уже на пути к браузерам, а вместе с ним и к совершенно новым способам работы с CSS и его расширения. Благодаря уже выпущенному API Paint , а также пользовательским реквизитам и значениям, наш творческий набор инструментов расширяется, что позволяет нам определять типизированные свойства CSS и использовать их для создания и анимации новых интересных дизайнов. В очереди выпусков Houdini есть еще кое-что, где вы сможете оставить отзыв и посмотреть, что будет с Houdini дальше. Houdini существует для разработки функций, которые объясняют «магию» стилей и макетов в Интернете, так что выходите и используйте эти волшебные функции с пользой.

Фото Майка Йонеца на Unsplash