可以覆盖默认的命名CSS颜色吗? [英] Can the default named CSS colors be overridden?

问题描述

受到>颜色:网络上更好的调色板的启发，我想知道是否有方法可以覆盖 HTML/CSS规范中定义的默认命名颜色定义，并带有这些新颜色.

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.

我知道我可以创建自定义CSS规则(和LESS)来定义新的颜色并将其应用于任何曾经使用过的元素，但是这里的兴趣是例如

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

更新

我的问题让我很受启发，我最终在Blink和WebKit源代码中进行了挖掘，从我的看到，这些颜色是在代码中定义的.

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.

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 Nightly内部版本包含 CSS变量的概念 CSS变量.尽管此时特定于供应商，但几乎"与我的问题有关.相关的W3C规范:级联变量模块1级的CSS自定义属性-参见示例4

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

推荐答案

否，这些颜色关键字是预定义的，无法从浏览器外部覆盖它们的颜色映射.这适用于您链接到的规范中定义的 all 所有名为color的关键字，包括基本的CSS关键字集，X11/SVG关键字和不建议使用的系统颜色(当然，会采用系统颜色从系统面板中.)

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

您将无法查询DOM元素的计算样式并即时替换它们，因为计算出的颜色值始终为rgb()或rgba()三元组，即使级联值是关键字也是如此.您在链接到的规范中对此进行了说明:

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:

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

• 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元素的计算出的color将是rgb(255, 0, 0)，而不是red.在这种情况下，您无法将#ff0000或red与rgb(255, 0, 0)区别开来，如果仅将red关键字作为目标，则会出现问题.

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.

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

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.

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

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屋！