Why is "rgb (224, 226, 213)" an invalid property value?

Question

Why can't any browser apply this color rgb rule?

HTML

<header>
    <h1>Header</h1>
</header>

CSS

header h1 {
    background-color: red;
    color: rgb (224, 226, 213);
}

Chrome Web Developer tools is telling me that it's an invalid property value, but I can't understand why. You can see the result in JSFiddle.

While this is a typo question, I don't think it's "unlikely to help future readers". This is a pretty common gotcha, and I imply as much in my answer. — BoltClock, Mar 19 '15 at 10:52

BoltClock · Accepted Answer · 2016-12-19T04:00:50.990

30

You have a space between the rgb and the (, which is not allowed:

header h1 {
    background-color: red;
    color: rgb(224, 226, 213);
}

No, I'm serious, it's not.

Unlike many programming languages, CSS expressly forbids having whitespace between a function name and the opening parenthesis. This applies not only to rgb() and rgba(), but also to other functional values such as url() and attr(), as well as functional pseudo-classes such as :nth-child(), :lang() and :not().

Refer to section 4.3.6 of CSS2.1, which states:

The format of an RGB value in the functional notation is 'rgb(' followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by ')'. [...] White space characters are allowed around the numerical values.

and also refer to Appendix G for the grammar, precisely the following tokenization, which clearly shows that whitespace is not expected between the identifier and the opening parenthesis:

{ident}"("      {return FUNCTION;}

edited Dec 19 '16 at 04:00

answered Dec 14 '12 at 10:51

BoltClock

700,868
160
1,392
1,356

2

This was a surprise to me, but the CSS 2.1 syntax really defines the function notations that way, and even the prose description of the `rgb(...)` makes it clear (and it also explicitly says that spaces are allowed around the numbers, implying that otherwise spaces are not allowed in the notation). – Jukka K. Korpela Dec 14 '12 at 11:01
2

Most simple way to resolve such errors is to validate it. You can validate your css in [W3C validator](http://jigsaw.w3.org/css-validator/#validate_by_input). – Aniket Thakur Mar 20 '15 at 03:29
While the Jigsaw validator can spot errors for you, it's notoriously unreliable at showing you how to *fix* them. For example it doesn't actually tell you that the presence of the space is causing the problem (because it doesn't *see* the space as a problem to begin with). And to someone who is used to programming languages allowing spaces there, it's not going to be immediately obvious. Bonus points if the asker did actually run their CSS through Jigsaw before posting their question (not saying I believe they did, but even if they did I wouldn't be surprised if they ended up posting anyways). – BoltClock Dec 19 '16 at 03:54
Of course, if you already *know* that spaces aren't allowed there then yes, just getting Jigsaw to spot them for you is enough for you to then resolve them on your own. But if you don't, those Parse Errors are going to be anything but useful and resolving these errors is going to be anything but simple. – BoltClock Dec 19 '16 at 04:09

score 0 · Answer 2 · answered Dec 14 '12 at 10:53

0

You need remove the space after rgb rgb(224, 226, 213)

answered Dec 14 '12 at 10:53

Miqdad Ali

6,129
7
31
50

Why is "rgb (224, 226, 213)" an invalid property value?

2 Answers2

Linked