english2009-02-01 CSS Voodoo - Die dunke Kunst der CSS Hacks
CSS Hacks sind etwas über daß man nur hinter verschlossenen Türen redet. Entwickler schämen sich sie zu benutzten. Sie sind schlecht, sie sind böse und man sollte sie wirklich überhaupt nicht benutzen...
... aber manchmal gibt es einfach keinen anderen weg - und dann verkauft man seine Seele and den Hack-Teufel...
Seit ich angefangen habe bei Yahoo! zu arbeiten habe ich aus Performance Gründen (weniger HTTP Abfragen) aufgehört Conditional Comments zu benutzen. Ich musste mich also plötzlich wieder mit den üblichen Hacks für Internet Explorer vertraut machen die ich schon völlig vergessen hatte.
Seither bin ich fast nie in Situationen geraten in denen sich auch andere Browser schlecht benommen hätten - aber es kam vor (immerhin sind sie alle nur Software und, wie wir alle wissen, gibt es keine Software ohne Bugs...).
Es folgt der aktuelle Stand meiner CSS Hack Sammlung. Man kann sich eine funktionierende Demo auf meiner CSS Hacks Beispielseite anschauen. Bitte nur mit besondere Vorsicht benutzen und tu dir selb st den Gefallen und probier ALLES ERDENKLICHE BEVOR du aufgiebst und sie selber benutzt.
In meiner Demo habe ich Absätze, die den Namen der Browser enthalten, die mit den Hacks angesprochen werden können, standardmäßig ausgeblendet.
body p { display: none; }
Dann benuze ich die Browser spezifischen Hacks um die jeweiligen Browsernamen wieder sichtbar zu machen:
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;
}
Firefox
#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*/
}
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;
}
}
So - jetzt fühle ich mich schmutzig und gehe duschen...