可以覆盖默认的CSS颜色吗？

灵感来自于 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 Line〜3299

static const ColorValue colorValues[] = {
    { CSSValueAqua,0xFF00FFFF },{ CSSValueBlack,0xFF000000 },{ CSSValueBlue,0xFF0000FF },{ CSSValueFuchsia,0xFFFF00FF },{ CSSValueGray,0xFF808080 },{ CSSValueGreen,0xFF008000  },{ CSSValueGrey,{ 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

解决方法

不,这些颜色关键字是预定义的,没有办法从浏览器外面覆盖它们的颜色映射.这适用于您链接到的规范中定义的所有命名的颜色关键字,包括CSS关键字的基本集合,X11 / SVG关键字和已弃用的系统颜色(尽管系统颜色取自系统调色板).

您将无法查询计算的DOM元素样式,也可以随时替换它们,因为计算的颜色值始终为rgb()或rgba()三元组,即使级联值为关键字.这在规范中说明您链接到：

The computed value for basic color keywords,RGB hex values and extended color keywords is the equivalent triplet of numerical RGB values,e.g. six digit hex value or rgb(…) functional value,with an alpha value of 1.

在您的示例CSS规则中,h1元素的计算颜色为rgb(255,0),而不是红色.在这种情况下,您无法区分#ff0000或rgb(255,0)的红色,如果您只专门针对红色关键字,则可能会导致问题.

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

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

可以覆盖默认的CSS颜色吗？

解决方法

相关文章