Browser & Platform Specific CSS

Jon Sidnell, 24th May 2008

This is not a very interesting page, but it is only intended to demonstrate the basic principle that I have started employing in the pages and sites that I develop. Essentially, rather than use HTML conditional comments that allow targeting of different versions of Internet Explorer, I am using different methods to apply a couple of classes to the body element. That way, CSS selectors can be constructed to manage browser and platform specific styling entirely within our CSS code.

I did this because I didn't particularly like a conditional comment-based approach for two reasons:

1. It muddies up the HTML - it always just struck me as plain ugly
2. It takes some, potentially very important, CSS code away from the main sections of CSS files
3. It's not the most flexible - only IE targetable?

Demo

Turn on | Turn off

• Mozilla Firefox 2
• Mozilla Firefox 3
• Internet Explorer 6
• Internet Explorer 7
• Safari 2
• Safari 3