Переходы и защита данных в CSS
Пользовательские свойства 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 Values and Units . По умолчанию *
.
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