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 ?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Tim
  • 2,466
  • 1
  • 21
  • 18
  • 2
    This will come back and bite you when you least expect it. Use a conditional comment instead: ``. – Andrew Moore Jul 11 '11 at 18:06
  • 1
    @nightfirecat - awesome thanks. tried searching and couldn't find anything :) seems the source is - http://blog.vervestudios.co/blog/post/2011/05/13/IE9-Only-CSS-Hack.aspx – Tim Jul 11 '11 at 18:09
  • 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. – GlennG Oct 20 '12 at 18:11
  • Conditional comments in HTML are useless in situations where you can't modify the HTML. – Beejor Sep 23 '15 at 20:44

5 Answers5

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.*/}
Jeffrey Karbowski
  • 564
  • 5
  • 15
  • 10
    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 – danwellman Jul 23 '12 at 11:35
  • 1
    Is it me or doesn't this work for the property background-image? – EricG Nov 14 '12 at 09:30
  • 1
    `\9` also seems to be targeting IE10, but IE11 seems to ignore it – jchn May 29 '14 at 10:50
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]-->
Prancer
  • 3,336
  • 2
  • 32
  • 38
meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
  • 1
    thanks @meder - but I want to try and use direct CSS instead :) i.e. because `You cannot use condcoms in the CSS code itself` – Tim Jul 11 '11 at 18:07
  • 3
    @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. – Andrew Moore Jul 11 '11 at 18:08
  • 1
    @Tim - 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.. – meder omuraliev Jul 11 '11 at 18:09
  • @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 ... – Tim Jul 11 '11 at 18:10
  • 2
    Google applications don't usually have the best front end code. – meder omuraliev Jul 11 '11 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. – Andrew Moore Jul 11 '11 at 18:11
  • @andrew @meder :) you've won me over ... I'll implement a JS solution instead :) [ no fun really :D ] – Tim Jul 11 '11 at 18:13
  • 1
    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. – Radu Jul 11 '11 at 18:14
  • 2
    @Tim: Sigh... Again, a JavaScript solution also have problems. Use a condcom. It's standard compliant and works just fine. – Andrew Moore Jul 11 '11 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 `` for what i need – Tim Jul 11 '11 at 18:15
  • You can put a style tag anywhere. – Radu Jul 11 '11 at 18:17
  • 2
    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 – danwellman Jul 23 '12 at 11:30
4

At this adress : http://www.impressivewebs.com/ie10-css-hacks/ I found a media query specific for IE10 only (and below) :

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
   /* IE10-specific styles go here */  
}
Val Entin
  • 953
  • 10
  • 18
  • it will affect ie11 also ? – Felix A J May 31 '15 at 13:54
  • This doesn't work for IE9 anymore. I have no idea why. – JCraine Jul 23 '15 at 14:34
  • @JCraine http://stackoverflow.com/questions/6418139/media-query-not-working-in-ie9 Check the firts answer to activate media querys on IE9 with `````` – Val Entin Jul 23 '15 at 23:47
  • This actually worked for me again, I found when running on localhost it would fail. But once pushed onto my server, IE9 would pick it up as expected. Weird. – JCraine Jul 24 '15 at 03:32
  • I think it may come from a conflict with the headers pushed by your HTTP server (Apache / Nginx / IIS...). Check if your config files for the project on dev, test and prod environement are the same. – Val Entin Jul 26 '15 at 23:06
4

IE9 is pretty standards compliant. You shouldn't need to hack it.

Also, you should be using IE conditional comments to load different styles. For IE 9 you would do:

<!--[if IE 9]>
    <!-- conditional content goes here -->
<![endif]-->
Radu
  • 8,561
  • 8
  • 55
  • 91
  • 3
    IE9 is pretty standards compliant. But THAT standards compliant. Once in a while we still get different interpretations IE 9 vs Good Browsers - so, yes, having those conditionals for IE 9 are quite nice. :) – MEM Jun 11 '12 at 11:07
  • 5
    IE9 is the most standard-compliant thing to come out of MS sure, but it's still way behind any other browser. – danwellman Jul 23 '12 at 11:35
  • @danwellman: alas, IE9 has quite a few rendering bugs (e.g. box-shadow) which require the odd tweak in the CSS. Whilst a CC is the right way to implement these tweaks, they're often a bit heavy handed and can make it harder to maintain your CSS, e.g. needing another stylesheet, or at least to define additional CSS selectors. – GlennG Oct 20 '12 at 18:16
3

As noted in some of the comments, there are times when conditional HTML won't work for a specific situation, especially if you're unable to modify the page code itself. So here's a workaround:

Base Style

.test{color:red;}

Browser-Specific Overrides

IE < 8: html >/**/body .test { color: green; }
IE 9: :root .test{color:green \ ;}
IE 8 and 9: .test{color:green \ ;}
IE 9 and Opera :root .test {color: green\0;}

Notes

The above won't work for background or font-*, and any \0 or \9 hacks are generally unstable. For a complete list of CSS hacks, see http://mynthon.net/howto/-/webdev/CSS-big-list-of-css-hacks.txt.

Beejor
  • 8,606
  • 1
  • 41
  • 31