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

2009-01-31 Barcamp London 6 - I'm one of the Organizers

After, believe it or not, 7 Barcamps as a participant it's now time to give back some of my experiences and "wisdom".

Teamed up with some of the other usual Barcamp suspects I organized the upcoming Barcamp London 6.

After we finally got the venue confirmation of the Guardian yesterday here's the official annoucement:

28 - 29 March 2009 the 6th London Barcamp will happen in the gorgeous new building of the Guardian.

In 2 weeks time the first ticket wave will be released (exact day and time will be announced). To avoid missing this important date you better follow us on twitter, subscribe to the reminder on the website and check into Upcoming.

2009-01-31 Barcamp London 6 - ich bin im Orga-Team

Nach, sage und schreibe, 7 Barcamps als Teilnehmer ist es an der Zeit meine gesammelte "Erfahrung" und "Weisheit" einzusetzen.

Zusammen mit einigen anderen der üblichen Barcamp-Verdächtigen habe ich das kommende Barcamp London 6 organisiert.

Nachdem wir gestern endlich die finale Zusage von the Guardian als location bekommen haben gibt es jetzt endlich die offizielle Ankündigung:

Vom 28. - 29. März 2009 findet in den schicken neuen Räumen der Zeitung the Guardian das sechste Londonder Barcamp statt.

In 2 Wochen werden schon die ersten Tickets vergeben (genauer Tag und Uhrzeit werden noch bekannt gegeben). Damit Ihr diesen wichtigen Termin nicht verpasst, folgt uns auf twitter, tragt euch in den Reminder auf der Website ein, macht euer Häkchen bei Upcoming und und und...

2008-12-30 Think Visibility - 1 day conference in Leeds

Announced only 2 weeks ago the Think Visibility Conference is already down to a small rest of 20 tickets!

There will be 16 Speakers in 2 Slots talking about SEO, PPC, Monetisation, Blogging, Accessibility and Usability. And all that for only 30£.

The Accessibility-Talk is featuring me telling you how to make your Website or Web Application usable for everyone.

So go get your last minute Ticket for the new Conference "up norf" in lovely Leeds!

Think Visibility Conference