Ответ 1
Нет, эти ключевые слова цвета предварительно определены и нет возможности переопределить их сопоставления цветов извне браузера. Это относится ко всем именованным ключевым словам цвета, указанным в спецификации, на которую вы ссылаетесь, включая базовый набор ключевых слов CSS, ключевые слова X11/SVG и устаревшие системные цвета (хотя, конечно, системные цвета взяты из палитры системы).
Вы не сможете запросить вычисленные стили элементов DOM и заменить их на лету либо потому, что вычисленные значения цвета всегда rgb()
или rgba()
триплеты, даже если каскадное значение является ключевым словом. Это указано в спецификации, с которой вы ссылаетесь:
- Вычисленное значение для базовых ключевых слов цвета, шестнадцатеричных значений RGB и расширенных ключевых слов цвета является эквивалентным триплетом числовых значений RGB, например. шестизначное шестнадцатеричное значение или функциональное значение rgb (...) с альфа-значением 1.
В вашем примере правила CSS вычисленный color
элементов h1
будет rgb(255, 0, 0)
, а не red
. Вы не можете отличить #ff0000
или red
от rgb(255, 0, 0)
в этом случае, что может создавать проблемы, если вы специально ориентируетесь только на ключевое слово red
.
Вы можете анализировать и изменять таблицу стилей непосредственно с помощью script, но разбор CSS нелегкий. Вы должны учитывать сокращенные объявления, URL-адреса (например, background: red url(redimg.png) center center no-repeat;
) и т.д. И т.д. Возможно, это выходит за рамки вашего вопроса.
Пользовательские свойства позволяют указывать только каскадную переменную вместо ключевого слова в качестве значения. Вы не сможете изменять существующие предварительно определенные ключевые слова с помощью настраиваемых свойств, поэтому вам все равно придется заменять каждое появление red
чем-то вроде var(red)
, где свойство var-red
соответствует пользовательскому красному.