< CSS Voodoo - Die dunkle Kunst der CSS Hacks | jQuery Accessible Tabs - Wie man Tabs WIRKLICH zugänglich macht >

2009-02-01 CSS Voodoo - The dark art of CSS Hacks

CSS Hacks are something one doesn't talk about in the public. Developers are ashamed of using them. They are bad, they are evil and you really shouldn't use them at all...

...but sometimes there's simply no other way - and then you sell your soul to the hack-devil...

Since I joined Yahoo! I stopped using Conditional Comments for Performance Reasons (less HTTP Requests). So I needed to get familiar again with the common Hacks for Internet Explorer I had completely forgotten about.

Over time I hardly ever ran into situations when other Browsers misbehaved - but it did happen (after all they are all just software and as we all know there is no software without Bugs...).

So following you'll find the current State of my CSS Hack Collection. You can see them in action on my CSS Hacks Example page. Please use with caution and do yourself the favour and try ANYTHING else BEFORE you capitulate and use them!

In my Demo I have Paragraphs containing the names of the targeted Browsers and hide them by default.

body p { display: none; }

Then I use the Browser specific Hacks to make the Browser names visible again:

Internet Explorer

 /* IE 6 only */
body #ie6 {
     _display: block;

/*IE 6 and IE 7 */
#ie6andie7 {
     *display: block;

/* IE 7 only */
html > body #ie7 {
    *display: block;

/* IE6, IE 7, IE 8 and IE 9 */
body #ie6andie7andie8andie9{

/* IE 8 */
body #ie8{
    *display: none; /* overwrite for ie6 and ie7*/
body #ie8:nth-of-type(1n){ /* overwrite for ie9 which still also reads the \9 hack */

/* IE 9+ */
body #ie9:nth-of-type(1n){ /* CSS3 Selector that is interpreted by many modern Browsers including IE9*/
    display:block\9; /* Hack to specify Internet Explorers including 9 so we exclude FF, webkit, etc */



/*Firefox 2 and 3 */
#firefox2, x:-moz-any-link {
    display: block;
    *display: none; /*overrule for ie6 and ie7 which also read this rule*/

/*Firefox 3 only (for Firefox 2 only use the rule above and this to overwrite for Firefox 3*/
#firefox3, x:-moz-any-link, x:default {
    display: block;
    *display: none; /*overrule for ie6 and ie7 which also read this rule*/
/* Firefox 3.5+ */
BODY:nth-of-type(1) #firefox3_5, x:-moz-any-link, x:default {
    display: block;


/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    #safari {
        display: block;


/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    head~body #opera {
        display: block;

Alright - now I feel dirty and go have a shower...

update 2010-07-23 added Support for Firefox 3.5+

update 2010-08-27 added Support for Internet Explorer 9+

You can always find the latest version on github

CSS Hacks mit Conditional Comments, Ja oder Nein?
Jeder der sich mit der Entwicklung von Webseiten beschäftigt kommt um CSS Hacks nicht herum. Meist handelt es sich um Hacks für das Wekzeug des Teufels, dem Internet Explorer. Aber auch für andere Browser kann es in seltenen Fällen von Nöten sein ...
Weblog: BlogHouse
Tracked: Feb 06, 08:39


Bradley WrightIt's worth noting that the Firefox 3 hack above will also be applied to IE7, so you need to make sure that if you use it you override the style in your IE7 CSS file too.
#1 Bradley Wright (Homepage) on 2009-02-01 11:46 (Reply)
monclerWell, and how about a hack that separate FF3 from FF3.5?
#1.1 moncler (Homepage) on 2010-07-23 10:01 (Reply)
Dirk GinaderThanks for the hint Brad :-)
I updated the example and the article accordingly.
#2 Dirk Ginader (Homepage) on 2009-02-01 12:16 (Reply)
SrikrishnaIts Worth, thanks for the post. :-)
#3 Srikrishna (Homepage) on 2009-03-04 18:58 (Reply)
PierreThe Safari syntax above also happens to work in Google Chrome! Yeah now I have a complete filtration system for all browsers thanks in part to this post! :-P
#4 Pierre (Homepage) on 2009-04-09 19:23 (Reply)
web development DubaiNicely done. Using black at 1% like that is also good forward-thinking, since Firefox 3.5 will have text-shadow implemented. I’ve seen a number of sites that implemented the old Safari 3 text-shadow hack that look terrible in FF 3.5.

This, on the other hand is just fine in FF 3.5, which I’m using to write this.
#5 web development Dubai (Homepage) on 2009-05-09 15:30 (Reply)
Dirk GinaderThe list now also contains a working hack for IE8 thanks to Jens Grochtdreis
#6 Dirk Ginader (Homepage) on 2009-05-14 16:02 (Reply)
#7 Sven on 2009-06-22 14:20 (Reply)
GilroyNice work buddy I really didn't know about it before reading your post. its not just excellent it superb man...
#8 Gilroy (Homepage) on 2009-07-03 06:54 (Reply)
web design companyCSS hacks are very common in web design world, because it saves the time and mental efforts, but i agree that it should not be used too often because it really harms the creative skills of a web designer. A creative and expert web designer never thoughts for CSS Hacks.
I am a web designer working in a new york web design company and i often see this practice in front of me. i always discourage it as an expert web designer.
thanks for the post i will be looking for more of the same.
#9 web design company (Homepage) on 2009-07-21 09:43 (Reply)
Fernando Emmanoel BorbaNice page... I feel dirty worshiping that page :-).

Well, and how about a hack that separate FF3 from FF3.5?
#10 Fernando Emmanoel Borba on 2009-09-04 14:03 (Reply)
Dirk GinaderThanks to your request Fernando I just added a hack to also identify Firefox 3.5+. See above or follow the changes on github: http://github.com/ginader/CSS-Hacks
#10.1 Dirk Ginader (Homepage) on 2010-07-23 19:50 (Reply)
Thierry KoblentzI thought neither IE6 nor 7 could see the Firefox rules, but as Bradley points out IE7 can get to it.

Which shows an interesting parsing bug that we could take advantage of. For example, instead of using this:

html > body #ie7 {
*display: block;

we could go with:

#ie7, x:-ie7 {
display: block;

The advantage of this approach is that it does not increase specificity.
#11 Thierry Koblentz (Homepage) on 2010-09-16 06:12 (Reply)
Add Comment

Standard emoticons like :-) and ;-) are converted to images.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.

Gravatar/Favatar/Pavatar/MyBlogLog author images supported.
You can use [geshi lang=javascript/css/html4strict/php]your code[/geshi] tags to embed source code snippets