CSS-переменные и темы
Узнайте, откуда элемент получает значение переменной: из собственного объявления, от родителя или из регистрации @property. Измените пример и сравните объяснение с вычисленным стилем браузера. Во второй вкладке соберите светлую и тёмную тему на основе палитры инструмента цветов.
Как исследовать переменные
В примере три вложенных элемента: корень, секция и карточка. Включите объявления --token на нужных уровнях и выберите элемент в инспекторе или кнопкой внутри превью. Таблица показывает исходные объявления, итоговые значения и источник для каждого уровня. Обычная переменная наследует уже вычисленное значение: переопределение --backup на потомке не пересчитывает родительский --token: var(--backup).
Выберите готовый пример или введите значение. Поддержаны литералы, ключевые слова initial, inherit, unset и отдельные выражения var() с вложенным fallback. Доступны переменные --token, --backup и отсутствующая --missing. Это лаборатория фиксированного дерева, а не инспектор произвольного CSS; слои, сторонние таблицы стилей и селекторы здесь не моделируются.
Тип примера выбирает использующее свойство: цвет — color, длина — padding-left, число — opacity. Незарегистрированная переменная может хранить 10px даже в примере цвета. Тогда color: var(--token, red) недопустим после подстановки: fallback red не исправляет неверный тип существующего значения.
Что меняет @property
Регистрация задаёт syntax, inherits и initial-value. Переключите тип между цветом, длиной и числом. При inherits: false элемент без собственного объявления получает initial-value. Явное inherit всё равно запрашивает значение родителя. Неверное типизированное значение после вычисления приводит к наследуемому или начальному значению, а не автоматически к fallback в использующем свойстве.
Начальное значение в этом инструменте должно быть независимым: фиксированный цвет, длина в px или число. Зарегистрированное initial-value делает переменную существующей, поэтому var(--token, fallback) обычно не использует fallback. Для opacity учитывайте, что прозрачность родителя дополнительно влияет на видимость потомков.
Для вашего удобства рекомендую использовать полноэкранный режим.
| Элемент | Объявление --token | Вычислено браузером | Источник |
|---|
CSS примера
HTML дерева элементов
Сохраните цвета в /tools/colors и нажмите «Взять сохранённую палитру» либо перейдите оттуда по кнопке «Создать тему». Назначьте цвета фона, текста и акцента отдельно для двух тем. Палитра не меняется при назначении ролей.
«Как в системе» следует prefers-color-scheme. Ручная тема задаётся data-theme на html. Light-dark() выбирает ветвь по используемой color-scheme, а не по имени класса. Экспорт содержит запасной вариант через медиазапрос для браузеров без light-dark(). Проверьте контраст выбранных сочетаний в инструменте цветов.
Переменные и CSS темы
Самостоятельный пример с переключателем
Для интерактивной части включите JavaScript. Обычная переменная наследуется: :root { --accent: teal; } и .card { color: var(--accent, navy); }. Fallback navy используется, когда --accent недоступна, а не когда её значение не подходит свойству color. Регистрация @property может задать тип, initial-value и отключить наследование.
Как получить тему из палитры
В цветах сохраните набор и нажмите «Создать тему» либо загрузите сохранённую палитру во второй вкладке. Назначьте фон, текст и акцент отдельно для светлой и тёмной темы. Переключатель примера работает независимо от темы самого сайта.
prefers-color-scheme отражает системное предпочтение. Ручной режим задаётся атрибутом data-theme на html; удаление атрибута возвращает автоматический выбор. Функция light-dark() использует активную color-scheme. CSS-экспорт содержит переменные палитры, семантические роли и правила переключения, а HTML-экспорт — самостоятельный пример с переключателем. Обработка локальная; переход «Создать тему» переносит набор в адресе ссылки.
Спецификации: CSS Custom Properties, Properties and Values API, light-dark(). Для сравнения конкурирующих правил откройте визуализатор каскада.