Fixing Cross-Browser CSS

Please. I beg you. If you are developing any kind of web-based software, read this.

We all know that in magical gum-drop land “standards” like those put out by the W3C would save developers from even having to think about cross-browser development issues. And I’m happy to see that with the modern browsers these days, the standards have gotten us about 80% of the way.

But is 80% consistency across browsers good enough? Hell no! Sure, you can easily make something work in each of the major browsers, but I think we should strive to having our software look and behave identically the same across browsers, wherever possible.

This used to be a much harder debate for me to carry on until I discovered this little trick that I’m about to describe. You’d have to put yourself through agonizing trial and error to uncover how you could structure your CSS so that it looked the same across browsers. I’m talking things like vertical text alignment of labels beside controls, some border treatments, table cells, and so on.

But now, with this little trick, it’s so easy it’s embarrassing. Which means that there’s no good excuse for not using it! I honestly can’t remember where I read it. I didn’t blog about it sooner because frankly, I thought it would make the rounds instantly and I wouldn’t need to (I tend not to report on the same ol’ stuff going around on its own). But no. So here it is:

1. Check the User Agent string on the server during a page request. You’ll get something like “IE5.5 Win blah blah blah”. Search for UserAgent strings and you’ll find an exhaustive list.
2. Based on the UserAgent string, add some CSS class names to the Body element in your HTML, like “Windows IE” or “Mac Firefox” based on whatever you can discern from the UserAgent string. You can even go so far as to stick versions in there like “v1″ or “v5_5″.
3. Now that you’ve marked up the Body element, in your CSS files, when you have a selector like “div.ThisSection {color: red}”, you can simply prefix it with whatever UserAgent based CSS class you added at the server, like “.IE div.ThisSection {color: orange}” to write browser, O/S or even version specific rules. You can even combine them like “.Mac.Firefox.v2 div.Section {color: blue}” to grab specific combinations of O/S, vendor and version specific rules
4. Now, code your site or app for your browser of choice, and at the end of each file, you can have the 3 or 4 browser specific exceptions that tidy up the look & feel where there are browser inconsistencies.

I find that by doing this AS I CODE (not when I’m all done a site or app), it adds almost no extra development time. If I wait ’til the end of a project, then it’s a royal pain in the butt.

It’s important to do this on the server before the page is served to the client. If you add the CSS classes to the Body element in Javascript during the OnLoad event, the browser will likely render the page first, then re-render it after the OnLoad event, which gives you a little flicker.

It’s a wonderful trick, hack free and wish I could remember where I stumbled across it so I could give credit.