CSS parser bug: .foo { property: value\9; } is parsed as .foo { property: value; } - by MathiasBynens

Status : 

  Duplicate<br /><br />
		This item appears to be a duplicate of another existing Connect or internal item.<br /><br />
		A more detailed explanation for the resolution of this particular item may have been provided in the comments section.


ID 597287 Comments
Status Closed Workarounds
Type Bug Repros 6
Opened 9/12/2010 1:23:42 PM
Duplicates 616860 Access Restriction Public

Description

There is a CSS parser bug in the latest IE9 Platform Preview that causes invalid CSS rules of the following format to be read:

    element { property: value\9; }

This is a long-standing CSS parser bug that was present in IE8 (and older versions) as well. It's so well-known that this is actively used as a browser CSS hack to target IE8 and below all over the internet. It's even included in this excellent overview of CSS hacks: http://paulirish.com/2009/browser-specific-css-hacks/

If this bug remains in IE9, it will break existing sites, since IE9 would incorrectly apply the hacks for IE8.

I've made a very simple test case where only one property/value attribute is set using the hack: http://jsbin.com/ociwu3 <del>However, IE9 seems to ignore the hack in this case, so the bug doesn't apply.</del> <ins>Update: the final IE9 release consistently has this bug, even with this simple test case.</ins>

====================================================== 
Everything after this paragraph doesn’t apply to the final IE9 release, only to the platform previews. It’s kept here for future reference.
======================================================

Paul’s CSS hacks test page located at http://paulirish.com/demo/css-hacks shows the following result in IE6, IE7, IE8 and IE9PPx: http://i.imgur.com/7alL6.png (look at the element with the simple \9 hack)

The CSS is the following:

    #diecinueve { background: #C4D6FD\9; border: 2px solid #0000FF\9; }

IE9PPx seems to apply the border (latter declaration), but ignores the background declaration. (IE8 and below apply both.)

This surely needs further investigation, but this proves the hack works in IE9PPx at times.
Sign in to post a comment.
Posted by David [MSFT] on 10/27/2011 at 6:07 AM
Thank you for your feedback. This turns out to be the same issue as Connect Feedback 574212. Please follow the progress of this bug there. Thank you.

Best regards,

The Internet Explorer Team
Posted by MathiasBynens on 4/16/2011 at 6:25 AM
This still happens in IE10. Should I file a new bug or can this one be re-opened?
Posted by Adam [MSFT] on 11/29/2010 at 4:34 PM
Thank you for your feedback.

At this time we do not plan on fixing this issue. Fixing this will involve a regression risk in our parser. We will readdress this issue in future versions of Internet Explorer.

We continue to welcome more feedback, so please don't hesitate to report other ways that we can improve Internet Explorer.

Best regards,

The Internet Explorer Team
Posted by MathiasBynens on 11/17/2010 at 1:28 PM
Still present in IE9 Platform Preview 7: http://i.imgur.com/KoRmn.png

What’s up Microsoft?
Posted by MathiasBynens on 10/28/2010 at 9:43 AM
Still present in IE9 Platform Preview 6: http://i.imgur.com/KoRmn.png

Is this even being worked on?
Posted by kangax on 10/13/2010 at 6:30 AM
Testing notification for comments from non-admin users.
Posted by MathiasBynens on 10/12/2010 at 5:22 AM
How’s the investigation going? Let me know if I can be of any assistance!
Posted by Adam [MSFT] on 9/26/2010 at 12:21 AM
Thank you for your feedback.

We were able to reproduce the issue and are investigating it.

Best regards,

The Internet Explorer Team
Posted by MathiasBynens on 9/16/2010 at 2:10 AM
I tested this in the IE9 Beta that was released yesterday. The \9 bug is still there.

You can reproduce this bug by going to <http://paulirish.com/demo/css-hacks>. Here is a screenshot of the results in IE6, IE7, IE8 and IE9 Beta: http://i.imgur.com/7alL6.png Look at the element with the simple \9 hack: although it doesn't seem to get the blue background, it does get the blue border.

The CSS is the following:

#diecinueve { background: #C4D6FD\9; border: 2px solid #0000FF\9; }

The first property seems to be ignored (correctly), but the second one (still) gets applied.

In IE8 and previous versions both properties got applied, so I guess this is an improvement — it’s just not quite complete yet ;)
Posted by MathiasBynens on 9/12/2010 at 3:33 PM
I've found an example of the \9 hack "working" in IE9:

Paul’s CSS hacks test page located at http://paulirish.com/demo/css-hacks shows the following result in IE6, IE7, IE8 and IE9: http://i.imgur.com/7alL6.png (look at the element with the simple \9 hack)

The CSS is the following:

#diecinueve { background: #C4D6FD\9; border: 2px solid #0000FF\9; }

IE9 seems to apply the border (latter declaration), but ignores the background declaration. (IE8 and below apply both.)
Posted by MathiasBynens on 9/12/2010 at 3:13 PM
Ok, it seems it's not that simple… Sometimes IE9 will ignore the hack, sometimes it won't. Results may vary depending on wether the hacky property/value pair is preceded or followed by another property/value pair or not, wether standards or quirks mode is used or not, and maybe other factors as well.

It turns out my test case is broken and IE9 is showing correct behavior for this particular test case because I oversimplified it.

I'll look into this further!
Posted by MathiasBynens on 9/12/2010 at 2:25 PM
It would be great if you could just swap this with \10 for IE9, e.g.

    element { property: value\9; } /* wouldn't have any effect once this bug is fixed */
    element { property: value\10; } /* would actually be useful if this was parsed by IE9 */

That way, \10 could be used as a way to target IE9 using CSS hacks.