02.08.2021
67f2a1260b78e130e862eb5a47c6ff41

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

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

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

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

CSS

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

CSS

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

Базы

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

CSS

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

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

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

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

CSS

Запасные варианты

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

CSS

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

CSS

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

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

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

CSS

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

CSS

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

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

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

JavaScript

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

Заключение

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

По материалам webformyself.com

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *