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;
}
/* IE 6, IE 7 and 8 */
body #ie6andie7andie8{
display:block\9;
}
/* IE 8 only */
body #ie8{
display:block\9;
*display: none; /*overrule for ie6 and ie7 which also read this rule*/
}
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...
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?
