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.
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'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).
> 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 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.
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.
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...
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.
98 comments
[ 3.3 ms ] story [ 171 ms ] threadSeveral 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.
Edit: Heh
= "blue" = 0blue0 = 0b00e0
it's ”blue” that is interesting.
http://jsfiddle.net/pPCmG/
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.
[1] https://news.ycombinator.com/item?id=6662342
[2] https://stackoverflow.com/questions/8318911/why-does-html-th...
• Ok, that is in fact green.
• I wonder if this is related to the colour name parsing weirdness that was on HN a couple of weeks ago?
• Heeeey, those aren't ASCII quotes!
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?
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).
http://jsfiddle.net/A6TQK/
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...".
red => #red => #0ed => #ed => #ed0 => #eedd00
Could be this?
EDIT: That was wrong:
red => #red => #0ed => #00ed00 seems the correct one.
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.
[0]http://stackoverflow.com/questions/8318911/why-does-html-thi...
I remember that HTML had named colors, like "goldenrod" and "peachpuff". Or was that just css?
http://jsfiddle.net/WGSNX/122/
[1]http://stackoverflow.com/questions/8318911/why-does-html-thi...
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...
Source: http://www.w3schools.com/tags/tag_font.asp
and
color="red"
Note the difference between ” and "
"red" is in fact red.
”abc” is still green!
http://asdf.com/asdfgreen.html