Target IE9 Only via CSS [duplicate]

T

5

22

Just wondering given these IE hacks in my bag of tricks

"\9" - for IE8 and below.
"*" - for IE7 and below.
"_" - for IE6.

i.e. such as

body { 
    border:2px solid blue;
    border:2px solid yellow \9;
    *border:2px solid green;
    _border:2px solid orange;
}

Whether anyone has such a hack for IE9 ? i.e. I'm trying to target IE9 only via CSS ?

Thigmotaxis answered 11/7, 2011 at 18:4 Comment(4)

This will come back and bite you when you least expect it. Use a conditional comment instead: . – Replay 11/7, 2011 at 18:6

@nightfirecat - awesome thanks. tried searching and couldn't find anything :) seems the source is - blog.vervestudios.co/blog/post/2011/05/13/… – Thigmotaxis 11/7, 2011 at 18:9

It's such a pity that Microsoft never implemented conditional comments in CSS. The * and _ are effectively de-facto standards for IE6 and IE7; in lieu of Microsoft implementing standards, we'll always need these rough & ready hacks. At least IE10's looking promising so shouldn't need hacks. – Languishing 20/10, 2012 at 18:11

Conditional comments in HTML are useless in situations where you can't modify the HTML. – Original 23/9, 2015 at 20:44

P

29

I suggest using condcoms to feed an IE9 css file or have a conditional html class, similar to:

<!--[if lt IE 7]> <html lang="en-us" class="no-js ie6"> <![endif]--> 
<!--[if IE 7]>    <html lang="en-us" class="no-js ie7"> <![endif]--> 
<!--[if IE 8]>    <html lang="en-us" class="no-js ie8"> <![endif]--> 
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->

Peder answered 11/7, 2011 at 18:6 Comment(12)

thanks @meder - but I want to try and use direct CSS instead :) i.e. because You cannot use condcoms in the CSS code itself – Thigmotaxis 11/7, 2011 at 18:7

@Tim: The problem with the hacks you describe above is that they are bugs. There were never intended to be features. By using them, you may cause problems with other browsers with similar bugs. Stick to standards. – Replay 11/7, 2011 at 18:8

@Thigmotaxis - it's not recommended to rely on hacks because with future iterations of the browser, those hacks could stab you in the back. If you adopt the html conditional as depicted and make one for IE9, in your main css you can do .ie9 body { } for example.. – Peder 11/7, 2011 at 18:9

@meder @andrew - yeah I suspected as much. just noted that Google was using such hacks in Google+ [wow, yes Google] - so assumed if Google engineers use them ... – Thigmotaxis 11/7, 2011 at 18:10

Google applications don't usually have the best front end code. – Peder 11/7, 2011 at 18:10

@Tim: Google doesn't exactly have great code review practices outside their core products... And not all software dev/engineer is equal. – Replay 11/7, 2011 at 18:11

@andrew @meder :) you've won me over ... I'll implement a JS solution instead :) [ no fun really :D ] – Thigmotaxis 11/7, 2011 at 18:13

Google uses hacks on purpose for the purpose of saving characters. Unless you're google and 1 extra byte translates to lots of money you should be writing good code. Google+ is a core product. – Ammamaria 11/7, 2011 at 18:14

@Tim: Sigh... Again, a JavaScript solution also have problems. Use a condcom. It's standard compliant and works just fine. – Replay 11/7, 2011 at 18:14

@andrew - ok ok :) was going to use quirksmode script as I need to add style elements but don't have acccess to the <head> for what i need – Thigmotaxis 11/7, 2011 at 18:15

You can put a style tag anywhere. – Ammamaria 11/7, 2011 at 18:17

These CSS hacks do not interfere with other browsers, I have used them for years with no problems whatsoever. Yes it is preferable to use condcoms, but what if you don't have control of the HTML, only the CSS? In this case it is impossible to use a condcom if one isn't already being used and a CSS hack may be your only option – Stanzel 23/7, 2012 at 11:30

M

42

Terrible, but it should work:

body { 
    border:2px solid blue;
    border:2px solid yellow \9;
    *border:2px solid green;
    _border:2px solid orange;
}
body:nth-child(n) {border:1px solid purple \9; /*Should target IE9 only - not fully tested.*/}

Myiasis answered 23/3, 2012 at 20:36 Comment(3)

I've tested this and confirm that it does target only IE9 successfully. And it's the only actual answer to the question that is actually correct. Advice to use condcoms is sound, but advising a different solution doesn't actually answer the original question – Stanzel 23/7, 2012 at 11:35

Is it me or doesn't this work for the property background-image? – Grizelda 14/11, 2012 at 9:30

\9 also seems to be targeting IE10, but IE11 seems to ignore it – Clout 29/5, 2014 at 10:50

P

29

I suggest using condcoms to feed an IE9 css file or have a conditional html class, similar to:

<!--[if lt IE 7]> <html lang="en-us" class="no-js ie6"> <![endif]--> 
<!--[if IE 7]>    <html lang="en-us" class="no-js ie7"> <![endif]--> 
<!--[if IE 8]>    <html lang="en-us" class="no-js ie8"> <![endif]--> 
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->