english2009-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{
display:block\9;
}
/* IE 8 */
body #ie8{
display:block\9;
*display: none; /* overwrite for ie6 and ie7*/
}
body #ie8:nth-of-type(1n){ /* overwrite for ie9 which still also reads the \9 hack */
display:none;
}
/* 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
/*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
/* Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#safari {
display: block;
}
}
Opera
/* 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+
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 ...
Tracked: Feb 06, 08:39
Comments
I updated the example and the article accordingly.
This, on the other hand is just fine in FF 3.5, which I’m using to write this.
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.
.Well, and how about a hack that separate FF3 from FF3.5?
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.
