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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

Зарегистрированные свойства

Регистрация свойства выглядит так:

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

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

syntax: string

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

inherits: boolean

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

initialValue: string

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

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

Добавление + означает, что оно принимает разделенный пробелами список значений этого синтаксиса. Например, <length>+ будет списком разделенных пробелами длин.

Добавление # означает, что оно принимает разделенный запятыми список значений этого синтаксиса. Например, <color># будет списком цветов через запятую.

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

Сложности

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

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

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

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

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

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

Заключение

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

Автор: Sam Richard

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий