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

时间:2014-01-10 05:36:46

标签: css css3 colors

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

1 个答案:

答案 0 :(得分:8)

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

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

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

在您的示例CSS规则中,color元素的计算h1rgb(255, 0, 0),而不是red。在这种情况下,您无法区分#ff0000redrgb(255, 0, 0),如果您专门定位red关键字,则可能会出现问题。

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

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