Showing CSS to IE only (The Underscore Hack) [Update]
This page details an inline CSS hack for Internet Explorer 6 on Windows. You can also find an extended version of this hack that works for Internet Explorer 6, 7 and 8.
The best idea, however, would be to serve a separate stylesheet for each browser you’re hacking to.
Recently, I stumbled upon (via Mr. van Kesteren) the best CSS “hack” you’ll ever use in CSS sites.
It allows you to show CSS to Internet Explorer only, omitting Mozilla, Safari and Opera.
This is different from conditional comments in the following way:
- It allows you to write conditional CSS directly in your stylesheet file, and doesn’t require inline styles
- It works for IE 5.0, 5.5 and 6.0
- It’s a hack
- It’s very simple to work with.
The hack is called the “Underscore Hack”, and apparently it’s been around for a while. For the benefit of those of us who didn’t know about it, I’m posting it here:
body {
background: green; /* show to Mozilla/Safari/Opera */
_background: red; /* show to IE */
}
Cons
- The CSS won’t validate
- The hack won’t work for IE5/Mac. For this platform, I recommend the IE5/Mac Band Pass Filter hack
Sample Page
View sample page, including CSS
More Information on CSS filtering
John Serris has done an indepth write-up on various other methods of filtering CSS. It is definitely worth a visit:
- Kent to Play New Single at Swedish Grammies
- Showing CSS to IE only (The Underscore Hack) [Update]
- Press Pause
- I Want...
It looks too good to be true! The stylesheet won’t validate, though?
No, I’m pretty sure the CSS won’t validate. I should probably add that to the article.
I also just remembered: what about macs? I haven’t been able to test it on any macs or their browsers. If anyone can do so and leave a note?
I always prefer the hack below:
`* html body {
background: red;
}`
Nice one, but would you be able to do this:
Moz, Saf, Opera:
.box {width: 340px;
}
IE:
* html .box {width: 300px;
}
I don’t see why not?.
Hmm, yes, that does work! Good hack Jeff, why didn’t I hear about that either?
However, unless this hack validates, I don’t see how it’s preferred over the underscore hack—the latter being much simpler to integrate in the CSS.
It does validate ;).
Joen , do you get the feeling the despite the fact that you and I are two wild and crzy guys that someone has been holding out on us?
Oh most definitely! How come no-one told me about these hacks!?
Can these hacks be platform specific too?
I have a site I’m developing and for some reason IE on a PC blows the nav 200 px to the right, on MAC, IE puts the nav where it should be buts puts the unordered list back into a list with no decoration.
These hacks would be a perfect solution if I could define the platform too.
You can see for yourself the site if you have IE…
http://www.fifthroomcreative.com/oracle/site
Thanks,
Steve
Steve,
Yes that is possible.
My suggestion would be to first of all, design the site so it works in Firefox or Safari—that way you’ll know that the CSS is like it’s supposed to be.
Then apply the hacks. The underscore hack will show the CSS to IE Windows only, so you could do something like:
.navigation {
width: 200px; /* the right width <strong>/
_width: 300px; /</strong> width shown to buggy IE, overwrites prior value <strong>/
}
To show CSS specific to IE/Mac (I’m guessing this is version 5.2?), you can use the band pass filter hack to further show CSS:
.navigation {
width: 200px; /</strong> the right width <strong>/
_width: 300px; /</strong> width shown to buggy IE, overwrites prior value <strong>/
/</strong>\*//*/
width: 400px;
/**/
}
In this example, Firefox and Safari should read a 200px width, IE/Win should read a 300px width, and IE/Mac should read a 400px width.
Just fill in the right values, I just chose “width” as an example.
Edit: On first attempt I wrote faulty code, fixed it.
Joen,
Thanks… Works great in Mozilla, Firefox, and Safari, just IE on both platforms throws funky things at me. Thanks for the tips… I’m going to put them into action tonight. I’ll let you konw how it goes.
Steve
It’s like fight club, although I fear I have already said too much…
Time for you boys to do some homework:
http://www.dithered.com/css_filters/index.html
Recently I’ve started handling my css hackage the following way:
Create 1 master style sheet (linked normally in the html head) that only contains IMPORTS like so:
@import "all.css";
/*\*/ @import "ie-pc-hacks.css"; /**/
/*\*//*/ @import "ie-mac-hacks.css"; /**/
First import is for all browsers (all lines are ignored by old browsers like NN4 which don’t support this import syntax).
Second line imports a style sheet containing a mixture of * html hacks for ie 5+ PC and this hack for ie 5 css that differs from ie6. This is hidden from IE MAC via the comments.
Third line imports hacks for IE MAC. No other browser imports this style sheet due to the IE5 MAC band pass filter.
I use this method on my own site right now. Seems to work well.
One thing about validation:
According to this website it should validate against CSS 2.1 specifications.
BTW I like this hack BECAUSE it is only for IE-Win. IE-Mac does not really act like an IE and therefore most of the hacks have to be hidden from IE-Mac.
I use the star hack: instead of an underscore, using an asterisk in the same way. But someone told me that the page renders quicker with the underscore…do you know if this is true?
Supahank, I suppose that is true… after all, the underscore hack requires much less code to achieve the same, so the filesize should be smaller: hence faster loading.
On the other hand, we’re talking a few bits… I don’t think anyone will notice the difference.
Thanks for this. Just what I needed for a problematic page I have been working on tonight. Two underscores just solved the problem! Thanks again.
I just want to say, thank God!!!!!!! I was getting ready to hang myself above my desk. It worked great, thanks!!!!!!
I’d just like to say that I love the design of your site. Truly talented you are! The hack is great as well!
I used the underscore hack with my new forums, and I must say, it worked as advertised. While there are better ways of doing it, this is the easiest. And I don’t care about my css validating (it’s difficult enough for me to keep my pages validating!)
Thanks! =]
It must be noted that IE 7 doesn’t like it much.
IF IE statements are much prefered (alas, but true!).
Nicely done, I knew abotu this before, just googled for it because I couldnt remember how. An underscore, so very easy… works because in css an underscore is a comment while IE isnt css compliant and ignores it. I wonder if that is why microsoft kept it?
thank you .. u helped me a lot
Doesn’ seem to work in the newest version of ie (6.0.2900.2180 sp2)
Works for me on that version of IE just fine.
This works better for us
padding-top:12px;
*padding-top:14px;
padding-bottom:13px;
*padding-bottom:10px;
Wow, this is one of the best tips I have EVER come across. Seriously, if I only knew this a year ago, days of my life would have not been lost! Thank you for sharing this! Awesome!
I am using in this way: _height:100%; _overflow-y:auto;
…so that I can use position:fixed bottom:0 in IE
I love this trick, and miss it in IE7 :)
nice tip, works in IE7 and IE8 beta 2 ( Browser Mode: IE7 / IE8 compatibility view / IE8 with Document Mode:Quirks ( Page Default ) ) also.
it is compatible with ie7 and ie8 in quirks mode as I mentioned above. This means you need a non valid HTML page :( for this to work.
Great hack! Nice it works in IE8 too. care if it’s not valid, as long as it works :)
Thanks Dear,,,
Its really works
This is rather outdated. Please, please use conditional comments. They are far, far, less likely to break things in the future. (As long as you don’t target future IE versions)
Read more about it at sitepoint: http://reference.sitepoint.com/css/conditionalcomments
I’m not able to use this hack, as it is not working with my IE7 version 7.0.5730.11
How come?
Because the underscore hack is for IE6 only.
You can use these hacks for IE7:
http://noscope.com/journal/2008/11/ie6-ie7-inline-css-hacks
though you should consider using a separate IE7 stylesheet using conditional comments:
http://noscope.com/journal/2004/04/ie-conditional-comments