minimal design

Wouldn’t it be great if you could just code for Standards compliant browser, and then only add a few rules in a separate file to tweak browser specific rendering quirks and call it a day? Well… that’s the way I’ve been doing it for a few years now.

Why

Every time I show my technic to other developers, they have a “this is so freaking awesome, how come I never thought about it myself?!” type reaction. So I thought I’d share with you. Plus, my technic has the following advantages:

• It keeps CSS clean for Standards compliant browsers
• It serves any extra browser specific CSS you define, so you can fine tune your design for each browser, without any code redundancy
• The parsing of CSS happens on the server so there’s no need for hacks
• It takes less than a minute to setup

The Basic Idea

You start with your base CSS files for Standards compliant browsers in your HTML header, for instance:

<link href="/_css/content.css" rel="style-sheet" type="text/css" media="all" />

Then, next line, you import another browser specific CSS file, for instance:

<link href="/_css/add_ie6.css" rel="style-sheet" type="text/css" media="screen" />

This second file usually contain only about 3 to 20 lines of code average. If it doesn’t, you might be doing something wrong… Since it’s imported after the main CSS, anything in there will override what’s in the main CSS file. For instance, I have an add_firefox.css for this site that looks like:

#content ol label {
    display: -moz-inline-box;
}

.email a {
    background-position: 0 0;
}

.entry .file_uri a  {
    padding-top: .1em;
    background-position: 0 0;
}

This is a pretty good example of what I use this technic for… The -moz-inline-box is mozzila specific way to implement the inline-block box model. You could leave it in your main CSS file and it would be ignored by other browsers, I just personally like to put it in there so that the CSS will validate in other browsers. The other rules though are just tiny image position adjustments to make up for the slightly different implementation of the baseline in all the main browsers. As you can see, minor browser specific adjustments (some might even call nitpicking…) which would be cumbersome to achieve any other way.

I also use this technic as a replacement for conditional comments. They both achieve the same thing, but I don’t have to worry about adding code to my header, I just drop an extra file in my css directory and it’s done. It’s just faster and more convenient for me.

How it works

In a nutshell, you upload a PHP script to your server, and copy/paste 2 lines of code in your HTML files. The PHP script does 3 things: it detects what browser is used to view your site, it checks your (predefined) CSS folder to see if there is a corresponding CSS file specific to that browser, and if there is, it outputs the appropriate line of code in the HTML header to import it. The different override files you can add to your CSS folder out of the box are:

• add_ie7.css
• add_ie6.css
• add_ie5.css
• add_firefox.css
• add_opera.css
• add_safari.css
• add_omniweb.css
• add_iphone.css

Implementation

Here’s where you can get the CSS override PHP script and info on how to install it.