Комментарии 9
Возможно, глупый вопрос, но если селекторы :root и html идентичны (да, :root выше по приоритету, но в веб-страничках ведь всё лежит в html), то почему во всех мануалах css-переменные объявляют не в html {}, а именно в :root {} ? Есть этому какое-то нормальное объяснение? Логика же абсолютно такая же, как с цветом текста или размером шрифта, но их никто не указывает в :root, обычно их указывают в html или body и не выпендриваются :) Когда-то давно, когда я впервые с этим столкнулся, то меня это сбило с толку, и я подумал, что переменные можно объявлять исключительно в :root.
Просто кроме html есть ещё xml и svg. А :root это корень любого типа документа.
Ага, я тут стал разбираться между :root и html. Вот смотрите, есть у меня такой код для смены цветовой схемы (реальный):
html.light{
--foreground: #000;
}
html.dark{
--foreground: #fff;
}
svg path{
fill: var(--foreground);
} Т.е. если я буду использовать эту общепринятую практику ":root вместо конкретного корневого элемента", то меня ждут неприятные сюрпризы?
Если поддерживается @supports, поддерживаются и переменные. Смысла в такой проверке нет.
Интересная статья, спасибо.
Любопытно, не знал, что переменные можно использовать в SVG. Вот только пример с цветом кнопки во втором пункте вызвал вопросы - разве при этом цвет не изменится везде, где он использовался, а не только на кнопке. Понятно, что это модельный пример, но кажется, что как раз в таких случаях лучше воздержаться от переопределения переменной и просто переназначить цвет.
Здорово. А что в последних версиях IE переменные ещё не поддерживаются? (я не проверял, не знаю, не пользуюсь IE)
Основные варианты использования CSS-переменных (Custom Properties)