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

От автора: пользовательские свойства 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) позволяет задать структуру пользовательских свойств. Это текущая ситуация при использовании пользовательских свойств:

.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> типов. Эти синтаксисы также могут быть изменены с помощью следующих значений.

Сложности

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

Заключение

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

Автор: Sam Richard

Источник: https://web.dev

Редакция: Команда webformyself.