Is this a safe IE8 hack?

If I’m writing it 20 times of course not. Then .ie8 would be better. But I only need (want is more like it) this one little thing. Not worth CCs in all my pages. Removing one or two lines in the css a few years down the road is a lot easier than removing CCs from 1000 pages

Or…

<!doctype html><html><head><meta charset=“utf-8”>
<title>Testing | http://www.visibilityinherit.com/&lt;/title&gt;
<style>
#test {color:red}
:root #test {color:blue}
</style>
</head>

<body>
<p id=“test”>test</p>
</body>
</html>

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

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


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.

Cool. What about propriety or vender specific css. Like zoom, and -ms- and etc, that IE8 uses but dropped since IE9?

I don’t think there are any others. All the rest are invalid character hacks that are best avoided as they can hit ie9 in some cases.

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.

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

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

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/&lt;/title&gt;
<style>
#test {color:red}
#test, #two#ids {color:blue}
</style>
</head>

<body>
<p id=“test”>test</p>
</body>
</html>