От автора: пользовательские свойства в CSS исключительно полезны не только для разметки CSS, но и для абстрагирования сложности и интерактивности на более мелкие, более простые в управлении части. Это краткое руководство поможет вам быстрее понять, как они работают и как их использовать.
К примеру, у вас есть такой CSS:
h1 { background: goldenrod;
} p { color: goldenrod;
} .my-element { border: 1px dotted goldenrod;
}Здесь много повторений, но как улучшить это с помощью нативного CSS? Вы можете использовать пользовательские свойства CSS, также известные как переменные CSS, для абстрагирования вашего CSS, чтобы сделать код более управляемым.
:root { --primary: goldenrod;
} h1 { background: var(--primary);
} p { color: var(--primary);
} .my-element { border: 1px dotted var(--primary);
}В этом руководстве мы познакомимся с основами пользовательских свойств и узнаем некоторые из чрезвычайно интересных и полезных вещей, которые они могут делать, и того, как они могут помочь вашим проектам.
Основы
Давайте начнем с самого начала и рассмотрим некоторые основы. Пользовательское свойство похоже на объявление обычной пары свойств и значений CSS. Эти объявления определены внутри правила CSS.
:root { --text-color: rebeccapurple;
}К вашему сведению
Знаете ли Вы что такое :root? Это псевдокласс, который представляет корень дерева документа, что в большинстве случаев означает элемент <html>. Однако, если вы находитесь в пользоветельском элементе, используя теневой DOM: :root будет представлять корень теневого DOM вместо элемента <html>.
После определения пользовательского свойства вы можете получить его значение с помощью функции var(). Это позволит получить текущее значение свойства , которое мы рассмотрим более подробно позже в этом руководстве.
С помощью комбинации объявленного свойства и функции var() мы можем использовать это в нашем CSS для применения значений, например:
:root { --text-color: rebeccapurple;
} h1 { color: var(--text-color);
}Резервные варианты
Если значение пользовательского свойства не было определено или недействительно, вместо него будет использоваться начальное или унаследованное значение. Это может привести к тому, что некоторые пользовательские интерфейсы выглядят довольно плохо, поэтому рекомендуется предоставить возможность установки резервного значения свойства в var().
h1 { color: var(--text-color, royalblue);
}При передаче второго резервного значения h1 будет royalblue, если свойство —text-color не было определено. Резервные варианты очень удобны, но они не используются браузерами, которые не поддерживают пользовательские свойства. Для той небольшой части браузеров, не поддерживающих пользовательские свойства, вы можете использовать такой приём:
h1 { color: royalblue; color: var(--text-color, royalblue);
}Нам все равно нужно передать резервние значение функции var(), потому что, как мы только что узнали, недопустимое значение, включающее неопределенные пользовательские свойства, приведет к использованию initial или унаследованного значения.
Вычисление пользовательских свойств
После установки значения для пользовательского свойства его можно изменить в контексте, и, как и любое другое объявление пары свойства — значения, на него будут влиять специфичность и каскад. В качестве контекста возьмем первый пример:
:root { --text-color: rebeccapurple;
} h1 { color: var(--text-color);
}Если h1 будет внутри <article> с классом .colour-change, который имеет объявление CSS значения для —text-color: это значение будет применено.
:root { --text-color: rebeccapurple;
} h1 { color: var(--text-color);
} article.colour-change { --text-color: seagreen;
}Этот CSS применяется потому, что .article.colour-change имеет более высокую специфичность, чем :root.
Установка пользовательских свойств с помощью JavaScript
Эта возможность контекстного переопределения пользовательских свойства делает их невероятно полезными для интерактивных состояний и, как правило, для написания меньшего количества CSS . В предыдущей демонстрации использовался переключаемый класс CSS для контекстной установки значения пользовательского свойства, но вы также можете установить их внутри своего JavaScript:
const article = document.querySelector('article');
const button = document.querySelector('button'); button.addEventListener('click', (evt) => { article.style.setProperty('--text-color', 'tomato');
});Элемент <article> получает значение —text-color для атрибута style, что дает ему более высокую специфичность, чем :root.
Заключение
Мы надеемся, что это краткое введение в пользовательские свойства дало вам знания и уверенность для их дальнейшего изучения.
Источник: piccalil.li
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен