Entries tagged as dirty

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{
    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+

You can always find the latest version on github

2009-02-01 CSS Voodoo - Die dunkle Kunst der CSS Hacks

CSS Hacks sind etwas über das 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 an 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 besonderer Vorsicht benutzen und tu dir selbst den Gefallen und probier ALLES ERDENKLICHE BEVOR du aufgibst 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 benutze 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;
}

/* 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

 
#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;
    }
}
 

So - jetzt fühle ich mich schmutzig und gehe duschen...

update 2010-07-23 jetzt Support für Firefox 3.5+

update 2010-08-27 jetzt Support für Internet Explorer 9+

Die neuest Version is immer auf github