Is this a safe IE8 hack?

**PicnicTutorials** · Jan 24, 2013 07:06

Originally Posted by Paul O'B

Yes you can basically use any selector that IE8 doesn't understand as long as all the other browsers do understand it

This one I just made up will target Ie8 and avoid any specificty issues:

Code:

p{background:green}/* ie8 but not ie7*/
#nonexistantID:last-child, p{background:blue}

The reason it works is that a browser is required to drop out of the comma separated list the moment it doesn't understand a selector. Ie8 sees the :last-child and doesn't understand it and so drops the whole comma separated list of values.

IE7 and under however still read the whole list even though they shouldn't.

Hey Paul thats a good one! So they all read the second one except IE8. But how do you mean "The reason it works is that a browser is required to drop out of the comma separated list the moment it doesn't understand a selector." If that were the case then Modern browsers as well should only read the first rule yeah? But they don't they see the 2nd

**Paul O'B** · Jan 24, 2013 10:07

Originally Posted by EricWatson

Hey Paul thats a good one! So they all read the second one except IE8. But how do you mean "The reason it works is that a browser is required to drop out of the comma separated list the moment it doesn't understand a selector." If that were the case then Modern browsers as well should only read the first rule yeah? But they don't they see the 2nd

Hi Eric,

All browsers see this first rule of course:

p{background:green}/* all browsers*/

But then the next rule is seen by all except IE8:

#nonexistantID:last-child, p{background:blue}

All browsers that understand :last-child will read all the rules in that comma separated list.

The first id "#nonexistantID:last-child" doesn't actually exists but that doesn't matter because a stylesheet is full of rules that don't exist in a page. It's a valid rule just like:
#test, #test2, #test3 {} etc...

IE8 reads the first id selector and sees :last-child and says "oh oh" I'm out of my depth here I can't reliably parse this section of code " and drops the whole comma separated list and moves onto the next separate rule in the stylesheet.

It's just the same technique as body:last-child p except that there is no extra specificity added. In my rule both ie8 and all other browsers have the same specificity because they only see "p{}".

As an aside authors should take care not to group advanced selectors in a comma separated list because if a browser fails on one of the selectors it will drop the whole lot so its best to keep your pseudo classes on separate rules unless you are 100% sure of the support.

**PicnicTutorials** · Jan 24, 2013 10:18

Ahh it's a way of adding last-child without the additional specificity of adding it to the body.

**PicnicTutorials** · Jan 24, 2013 15:28

I've got six ways to hack ie6-9 shown thus far. Know anymore good ones? http://goo.gl/Kcr8q

**PicnicTutorials** · Jan 24, 2013 16:17

Here is another good one to target ie8. Ie8 should abort once it hits the two ids as it thinks its ilegal. Apparently it's not. Untested

<!doctype html><html><head><meta charset="utf-8">
<title>Testing | http://www.visibilityinherit.com/</title>
<style>
#test {color:red}
#test, #two#ids {color:blue}
</style>
</head>

<body>
<p id="test">test</p>
</body>
</html>

User Tag List

Thread: Is this a safe IE8 hack?

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions