От автора: пользовательские свойства CSS, также известные как переменные CSS, позволяют вам определять собственные свойства и использовать их значения в CSS. Несмотря на то, что они невероятно полезны, у них есть недостатки, из-за которых с ними сложно работать: они могут принимать любое значение, поэтому могут быть случайно переопределены чем-то неожиданным, они всегда наследуют свои значения от родителей, и вы не можете их перенести.
Благодаря CSS Properties and Values API Level 1 Houdini, который теперь доступен в Chrome 78, эти недостатки преодолены, что делает пользовательские свойства CSS невероятно мощными!
Что такое Houdini
Прежде чем говорить о новом API, давайте кратко рассмотрим Houdini. Целевая группа CSS-TAG Houdini, более известная как 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) позволяет задать структуру пользовательских свойств. Это текущая ситуация при использовании пользовательских свойств:
|
1 2 3 |
.thing { --my-color: green; } |
Поскольку пользовательские свойства не имеют типов, они могут быть переопределены неожиданным образом. Например, рассмотрим, что произойдет, если вы определите —my-color с помощью URL.
|
1 2 3 4 |
.thing { --my-color: url(‘not-a-color’); color: var(--my-color); } |
Здесь, поскольку —my-color не типизирован, он не знает, что URL не является допустимым значением цвета! Когда мы используем его, он возвращается к значениям по умолчанию (черный для color, прозрачный для background). С Houdini Props and Vals можно зарегистрировать пользовательские свойства, чтобы браузер знал, какими они должны быть!
Теперь пользовательское свойство —my-color зарегистрировано как цвет! Это сообщает браузеру, какие значения допустимы и как он может вводить и обрабатывать это свойство!
Зарегистрированные свойства
Регистрация свойства выглядит так:
|
1 2 3 4 5 6 |
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 есть две проблемы. Во-первых, после определения невозможно обновить существующее зарегистрированное свойство, и попытка перерегистрации свойства приведет к ошибке, указывающей, что оно уже определено.
Во-вторых, в отличие от стандартных свойств, зарегистрированные свойства не проверяются при их анализе. Скорее их валидация выполняется при вычислении. Это означает, что и недопустимые значения не будут отображаться как недействительные при валидации свойств элемента, а также при включении недопустимого свойства после валидного, не будет отката к валидному свойству; будет выполнен откат к значению зарегистрированного свойства по умолчанию.
Анимация пользовательских свойств
Зарегистрированное пользовательское свойство предоставляет забавный бонус помимо проверки типов: возможность его анимировать! Базовый пример анимации выглядит так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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 может быть написан с тем же зарегистрированным свойством:
|
1 2 3 4 5 6 7 8 9 |
button { --stop-color: red; background: linear-gradient(var(--stop-color), black); transition: --stop-color 1s; } button:hover { --stop-color: green; } |
Это анимирует наше пользовательское свойство, которое является частью linear-gradient, таким образом, анимируя линейный градиент. Посмотрите Glitch, чтобы увидеть полный код в действии и поэкспериментировать с ним самостоятельно.
Заключение
Houdini улучшает поддержку в бразерах, и вместе с этим и совершенно новые способы работы и расширения CSS. С уже реализованным Paint API, а теперь и Custom Props and Vals, наша креативная панель инструментов расширяется, позволяя определять типизированные свойства CSS и использовать их для создания и анимации новых и захватывающих макетов. В очереди на выпуск Houdini есть еще кое-что, вы можете оставить там отзыв и посмотреть, что будет дальше с Houdini. Houdini предназначен для разработки функций, которые описывают «магию» стилей и макета в Сети, так что пользуйтесь им и этими магическими функциями.
Автор: Sam Richard
Источник: //web.dev
Редакция: Команда webformyself.
