是否可以覆盖默认的命名CSS颜色？ [英] Can the default named CSS colors be overidden?

问题描述

受到颜色：网络更好的色彩调色板的启发，我想知道是否有办法重写默认使用这些新颜色在 HTML / CSS规范中定义的命名颜色定义。 p>

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

  h1 {
 / *＃ff0000是红色的当前定义，我想重新定义为＃FF4136 * / 
颜色：红色
} 
  

更新

我的灵感来自我的问题，我最终在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} 
}; 
  

眨眼〜第157行

更新2

希望未来。 FireFox每晚构建包括 CSS变量。虽然在这一点上供应商特定，它几乎是与我的问题有关。相关的W3C规范：级联变量的CSS自定义属性模块级别1 - 请参阅示例4

解决方案

不，这些颜色关键字是预定义的，并且无法覆盖浏览器外部的颜色映射。这适用于您链接到的规范中定义的所有命名的颜色关键字，包括基本的CSS关键字集，X11 / SVG关键字和已弃用的系统颜色（虽然系统颜色从系统调色板）。

您将无法查询DOM元素的计算风格并在运行中替换它们，因为计算的颜色值总是 rgb（）或 rgba（）三元组，即使级联值是关键字。这在您链接到的规范中说明：

• 基本颜色关键字值和扩展颜色关键字是等价的三元组数值RGB值，例如六位数十六进制值或rgb（...）函数值，其alpha值为1.

在您的示例CSS规则中， h1 元素的计算颜色将为 rgb 255，0，0），而不是红。您不能从 rgb（255，0，0）中区分＃ff0000 或 red code>在这种情况下，如果你专门只针对红色关键字，可能会造成问题。

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

自定义属性只允许您指定一个级联变量来代替关键字作为值。您将无法使用自定义属性修改现有的预定义关键字，因此您仍然必须使用类似于 red > var（red）其中 var-red 属性对应于用户定义的红色。

Inspired by COLORS: A nicer color palette for the web, I was wondering if there is way to override the default named color definition as defined in the HTML/CSS specification with these new colors.

I am aware that I can create custom CSS rules (and LESS) to define new colors and apply these to which ever elements, however the interest here is for example

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

Update

I was so inspired by my question, I ended up digging around in the Blink and WebKit source code and from what I can see, these colors are defined within code.

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 }
};

Blink ~ Line 157

Update 2

There may some hope for the future. FireFox Nightly build includes the concept of a CSS-variable. Although a vendor specific at this point, it 'almost' is related to my question. The related W3C specification : CSS Custom Properties for Cascading Variables Module Level 1 - see Example 4

解决方案

No, these color keywords are pre-defined and there is no way to override their color mappings from outside the browser. This applies to all named color keywords defined in the spec that you link to, including the basic set of CSS keywords, the X11/SVG keywords and the deprecated system colors (although of course, system colors are taken from the system palette).

You won't be able to query computed styles of DOM elements and replace them on the fly either, because computed color values are always rgb() or rgba() triplets, even if the cascaded value is the keyword. This is stated in the spec that you link to:

• 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.

In your example CSS rule, the computed color of h1 elements would be rgb(255, 0, 0), not red. You cannot distinguish #ff0000 or red from rgb(255, 0, 0) in that case, which can pose problems if you're specifically only targeting the red keyword.

You could parse and modify the stylesheet directly using a script, but CSS parsing isn't easy. You have to account for shorthand declarations, URLs (e.g. background: red url(redimg.png) center center no-repeat;), and so on and so forth. That's probably out of the scope of your question.

Custom properties only allow you to specify a cascading variable in place of a keyword as a value. You won't be able to modify existing pre-defined keywords with custom properties, so you'd still have to replace every occurrence of red with something like var(red) where the var-red property corresponds to a user-defined red.

这篇关于是否可以覆盖默认的命名CSS颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！