Sorry, this isn't correct. Red is a perfectly valid color value. This is not about property expansion.
This is because the source uses curly quotes, which are not recognized as a parameter bracketing, and so the curly quotes are trying to be interpreted as part of the value.
Change the quotes to actual quotes and it starts working as expected.
No, the OP is correct. You're right that <red> is a valid CSS color keyword, but <”red”> is not. Because of this, the CSS spec treats it as a "legacy color value" and attempts to interpret it as a string of characters (including the quotes) rather than a keyword.
> I wonder if this is related to the colour name parsing weirdness that was on HN a couple of weeks ago?
Exactly my first thought. This is one of the main reasons I frequent this site - I have tons of random tidbits like this cached in my head, so around half of the times someone introduces a problem to me, I am known to reply: "you know, X months back there was a post on Hacker News...".
I'd like to ask everyone saying "I saw the quotes right away," what OS do you use? Perhaps your OS uses a different font.
I've had bugs in websites where menus would be completely messed up because they didn't fit in their given space, just because the font of choice was not available on Linux and it fell back on something slightly larger.
Edit: Though in the HN title it is much clearer than in the jsfiddle, for me anyway. Might that be it?
Maybe it's just late at night, but how does this work? I understand the words "invisible separator", but for lack of better phrasing, I don't see an invisible separator.
Between the R and E of red there's some extra character.
My font shows it as a missing character box.
I'm guessing that it just breaks the 'red' into a value which is interpreted as whatever the hex is. (See the chuck norris links posted in this thread).
There was a big Stack Overflow post on HTML color rendering[0].
Basically, the browser thinks it's looking at a malformed hex number and strips the invalid chars, in this case turning “red” into 00ED0. This is padded with 0s until it's divisible by 3, giving 00ED00.
1) Curly quotes are not a valid surrounding for values.
2) <foo bar=baz> will usually be interpreted as a value by browsers, even though it's illegal, because everything on the web is wrong
3) The browser sees curly quotes as part of baz
4) For lord only knows what reason, the most basic interpretation of that curly quote appears to be the color green. That'll be somewhere in the CSS spec. I don't care to look it up.
If you change those to straight quotes, suddenly it'll start working. Notice that JSFiddle also highlights the source differently.
By the way, the "font" tag is over, and setting color that way is also over. <span style="color:red">Like this please</span> if you need to do inline styling.
I believe that HTML 5 allows for unquoted values. As long as the attribute doors not contain HTML special characters or spaces, it's legal to omit them.
Correct. The HTML5 spec includes "unquoted attribute values," which have some special restrictions (no spaces, can't be the empty string, can't use HTML characters like >, <, or =, and — duh — no quotes). http://www.w3.org/TR/html-markup/syntax.html#attr-value-unqu...
Yes, and that's the mechanism by which HTML gets confused and thinks that the curly quotes, which are not recognized as value bracketting, are part of the value.
Hard to spot. I can imagine this happening in the real world.
Several blogs engines seem to like automatically converting normal quotes to curly quotes in an attempt to prettify their text rendering. I remember copy and pasting code snippets in the and having to fix this.
I don't know why is considering that as a RGB notation instead of the color red, but following this progression seems correct:
http://jsfiddle.net/7ACky/2/
red => #red => #0ed => #ed => #ed0 => #eedd00
Could be this?
EDIT: That was wrong:
red => #red => #0ed => #00ed00 seems the correct one.
I think it is a bug with jsfiddle. It render you code:
<font color=”red”>Red, anyone?</font>
like this:
<font color="”red”">Red, anyone?</font>
And if you try like:
<font color=red>Red, anyone?</font>
it works.
hmm... if i set colour to #000000 and use the correct quotes it changes the background and not the foreground.
isn't this just a case of using something incorrectly and getting an undefined result? just leaves me wondering why errors like this aren't reported or at least warned about by the browser.
if this was the compiler for any language that wasn't HTML (cringes at the thought of that being a language and not just a data format) it would never ship in such a poor state...
the reason it didn't work is you were not using ASCI values. HTML even though it supports multi-byte strings, the constructs which power the html spec do not support multi-byte strings. Also smart-quotes are note part of that spec and will be interpreted incorrectly. replace smart-quotes with normal quotes will make it work correctly.
Lol, truism, yet, for older frameworks, layers of code that are always "in front" of the css (for whatever damned reason) this might still become an issue in some form or another. That said, it should obviously show through when the "test-phase" is there to verify every line of code. nice find though, nice find.