Question

受COLORS: A nicer color palette for the web的启发，我想知道是否有办法覆盖HTML/CSS specification中使用这些新颜色定义的默认命名颜色定义。

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

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

的更新

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

Webkit行~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 }
};

Blink〜第157行

更新2

未来可能会有一些希望。 FireFox每晚构建包括CSS-variable的概念。虽然此时供应商具体，但它“几乎”与我的问题有关。相关的W3C规范：CSS Custom Properties for Cascading Variables Module Level 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解析并不容易。您必须考虑速记声明，网址（例如background: red url(redimg.png) center center no-repeat;）等等。这可能超出了你的问题的范围。

自定义属性仅允许您指定级联变量来代替关键字作为值。您将无法使用自定义属性修改现有的预定义关键字，因此您仍需要将red的每个匹配项替换为var(red) var-red属性对应的内容用户定义的红色。

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

的更新

Webkit行~3299

Blink〜第157行

更新2

1 个答案: