Entries tagged as en

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-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.

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

2008-12-17 Yahoo! Currency Converter - my favorite project is now live

About 9 months ago my fellow co-worker, the User Experience Designer Graham Beale, and I started developing ideas for a prototype of a new Currency Converter for the worldwide relaunch of Yahoo! Finance.

We wanted Features we haven't seen like this in the Internet so far. We wanted conversion without a page reload, searching for currencies like in the Firefox 3 "awesome bar", total accessibility, much more and of course everything in realtime.

About a year, many user tests, many new ideas, a lot of Screenreader testing with my fellow co-worker Artur Ortega and even more time developing, the result went online yesterday night!

I need to blog about the many Screenreader specific tricks, we used and for a large part also created for this, separately. Until then I wish you lots of fun with the brand new Yahoo! Currency Converter and suggest to use the App at one point only using the Keyboard, switch of Javascript or just play with the neat Currency Search :-).

Update:

My article about Making the new Yahoo! Currency Converter accessible is now online on the YDN Blog!