Начало работы с пользовательскими свойствами CSS

Начало работы с пользовательскими свойствами CSS

От автора: пользовательские свойства в CSS исключительно полезны не только для разметки CSS, но и для абстрагирования сложности и интерактивности на более мелкие, более простые в управлении части. Это краткое руководство поможет вам быстрее понять, как они работают и как их использовать.

К примеру, у вас есть такой CSS:

Здесь много повторений, но как улучшить это с помощью нативного CSS? Вы можете использовать пользовательские свойства CSS, также известные как переменные CSS, для абстрагирования вашего CSS, чтобы сделать код более управляемым.

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

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

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

В этом руководстве мы познакомимся с основами пользовательских свойств и узнаем некоторые из чрезвычайно интересных и полезных вещей, которые они могут делать, и того, как они могут помочь вашим проектам.

Основы

Давайте начнем с самого начала и рассмотрим некоторые основы. Пользовательское свойство похоже на объявление обычной пары свойств и значений CSS. Эти объявления определены внутри правила CSS.

К вашему сведению

Знаете ли Вы что такое :root? Это псевдокласс, который представляет корень дерева документа, что в большинстве случаев означает элемент <html>. Однако, если вы находитесь в пользоветельском элементе, используя теневой DOM: :root будет представлять корень теневого DOM вместо элемента <html>.

После определения пользовательского свойства вы можете получить его значение с помощью функции var(). Это позволит получить текущее значение свойства , которое мы рассмотрим более подробно позже в этом руководстве.

С помощью комбинации объявленного свойства и функции var() мы можем использовать это в нашем CSS для применения значений, например:

Резервные варианты

Если значение пользовательского свойства не было определено или недействительно, вместо него будет использоваться начальное или унаследованное значение. Это может привести к тому, что некоторые пользовательские интерфейсы выглядят довольно плохо, поэтому рекомендуется предоставить возможность установки резервного значения свойства в var().

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

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

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

При передаче второго резервного значения h1 будет royalblue, если свойство —text-color не было определено. Резервные варианты очень удобны, но они не используются браузерами, которые не поддерживают пользовательские свойства. Для той небольшой части браузеров, не поддерживающих пользовательские свойства, вы можете использовать такой приём:

Нам все равно нужно передать резервние значение функции var(), потому что, как мы только что узнали, недопустимое значение, включающее неопределенные пользовательские свойства, приведет к использованию initial или унаследованного значения.

Вычисление пользовательских свойств

После установки значения для пользовательского свойства его можно изменить в контексте, и, как и любое другое объявление пары свойства — значения, на него будут влиять специфичность и каскад. В качестве контекста возьмем первый пример:

Если h1 будет внутри <article> с классом .colour-change, который имеет объявление CSS значения для —text-color: это значение будет применено.

Этот CSS применяется потому, что .article.colour-change имеет более высокую специфичность, чем :root.

Установка пользовательских свойств с помощью JavaScript

Эта возможность контекстного переопределения пользовательских свойства делает их невероятно полезными для интерактивных состояний и, как правило, для написания меньшего количества CSS . В предыдущей демонстрации использовался переключаемый класс CSS для контекстной установки значения пользовательского свойства, но вы также можете установить их внутри своего JavaScript:

Элемент <article> получает значение —text-color для атрибута style, что дает ему более высокую специфичность, чем :root.

Заключение

Мы надеемся, что это краткое введение в пользовательские свойства дало вам знания и уверенность для их дальнейшего изучения.

Источник: piccalil.li

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

Читайте нас в Telegram, VK, Яндекс.Дзен

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

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

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

PSD to HTML

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

Смотреть

Метки:

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

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

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

Комментирование закрыто.