是否可以覆盖默认的命名CSS颜色？

Question

灵感来自COLORS:一个更好的网页调色板,我想知道是否有办法用这些新颜色覆盖HTML/CSS规范中定义的默认命名颜色定义.

我知道我可以创建自定义CSS规则(和LESS)来定义新颜色并将这些颜色应用到哪些元素,但是这里的兴趣是例如

h1{
    /* #ff0000 is current definition of red, I want to redefine it to #FF4136 */
    color: red;
}

更新

我的问题激发了我的灵感,最后我在Blink和WebKit源代码中进行了挖掘,从我所看到的,这些颜色是在代码中定义的.

Webkit Line~3299

static const ColorValue colorValues[] = {
    { CSSValueAqua, 0xFF00FFFF },
    { CSSValueBlack, 0xFF000000 },
    { CSSValueBlue, 0xFF0000FF },
    { CSSValueFuchsia, 0xFFFF00FF },
    { CSSValueGray, 0xFF808080 },
    { CSSValueGreen, 0xFF008000  },
    { CSSValueGrey, 0xFF808080 },
    { CSSValueLime, 0xFF00FF00 },
    { CSSValueMaroon, 0xFF800000 },
    { CSSValueNavy, 0xFF000080 },
    { CSSValueOlive, 0xFF808000  },
    { CSSValueOrange, 0xFFFFA500 },
    { CSSValuePurple, 0xFF800080 },
    { CSSValueRed, 0xFFFF0000 },
    { CSSValueSilver, 0xFFC0C0C0 },
    { CSSValueTeal, 0xFF008080  },
    { CSSValueTransparent, 0x00000000 },
    { CSSValueWhite, 0xFFFFFFFF },
    { CSSValueYellow, 0xFFFFFF00 },
    { CSSValueInvalid, CSSValueInvalid }
};

眨眼〜第157行

更新2

未来可能会有一些希望.FireFox每晚构建包括CSS变量的概念.虽然此时供应商具体,但它"几乎"与我的问题有关.相关的W3C规范:用于级联变量的CSS自定义属性模块级别1 - 参见示例4

Answer 1

不,这些颜色关键字是预定义的,无法从浏览器外部覆盖其颜色映射.这适用于您链接到的规范中定义的所有命名颜色关键字,包括基本的CSS关键字集,X11/SVG关键字和不推荐使用的系统颜色(当然,系统颜色取自系统调色板).

您将无法查询DOM元素的计算样式并在运行中替换它们,因为计算的颜色值总是rgb()或rgba()三元组,即使级联值是关键字.这在您链接到的规范中说明:

• 基本颜色关键字,RGB十六进制值和扩展颜色关键字的计算值是数值RGB值的等效三元组,例如六位十六进制值或rgb(...)功能值,alpha值为1.

在你的榜样CSS规则,计算出color的h1元素是rgb(255, 0, 0),没有red.你不能区分#ff0000或red从rgb(255, 0, 0)在这种情况下,这可能会造成问题,如果你只专门针对red关键字.

您可以使用脚本直接解析和修改样式表,但CSS解析并不容易.您必须考虑速记声明,URL(例如background: red url(redimg.png) center center no-repeat;)等等.这可能超出了你的问题的范围.

自定义属性仅允许您指定级联变量来代替关键字作为值.您将无法使用自定义属性修改现有的预定义关键字,因此您仍然必须red使用属性对应于用户定义的红色的var(red)位置 替换每次出现的关键字var-red.