Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Taming The Browsers: Build for the Ideal

Last updated Oct 17, 2003.

By Dave Shea, co-author of The Zen of CSS Design: Visual Enlightenment for the Web

The Web's continual move to CSS-based layouts has been exciting, but not without its share of headaches. After spending years working out the table layout discrepancies between Netscape and Internet Explorer, we had to throw out that knowledge and start from scratch with a brand new set of layout bugs.

The good news is that most CSS rendering issues now have workarounds. The bad news is that the methods are far from elegant, not officially supported, and at worst, hacks that rely on browser parsing errors. These have been short-term fixes for the most part, but with the impending release of Internet Explorer 7 some time in 2006, now is a good time to start thinking about how these will work next year and beyond.

This article, which has been divided into two parts due to length, will detail a browser management method that accounts for the most common browsers out there today: Internet Explorer 5 for Mac; Internet Explorer 5.01, 5.5, and 6.0 for Windows; Mozilla Firefox; Safari; and Opera.

Build for the Ideal, Fix for the Exception

A fundamental assumption of the browser management system we'll be analyzing is the idea of building for the ideal and fixing only for the exception. The best way to create consistently cross-browser compatible CSS-based Web sites is to ignore common sense and build not in the most common browser out there—which would be IE6 for Windows—but instead, build for the most CSS-compliant browser available.

As you're creating your CSS, test first in either Firefox or Safari. After you’ve tested in one, test in the other. There shouldn't be many differences—if there are, fix them. Then test in the latest version of Opera, if you support it. Only after you've made your rounds in the more standards-compliant browsers should you load your work in Internet Explorer. (And, at that point, it's perfectly natural to curl into a ball and cry, but keep reading!)

This may seem counter-intuitive, but the idea goes like this: if you test your work first in the most CSS-compliant browser out there, the behavior of your code will conform closely to the standard. If you test in a buggy browser, chances are your code will expect certain buggy behaviors. Creating a dependency on non-standard, browser-specific behavior is the quickest way to guarantee disaster when testing in other browsers.

The ideal is to have a clean, standards-compliant main CSS file that is free of browser-specific code, and place any needed hacks and workarounds in external files. This way, as the workarounds become unnecessary due to browser upgrades, extracting the workarounds is as simple as deleting a reference to the external file. Remember that over time, browsers will only get better at supporting CSS; making sure your code is future-proof means conforming to the spec as closely as you can.

CSS Hacks

In the second part of this column, I’ll be looking at the CSS hacks that enable us to create the cleanest style sheet possible thanks to their ability to import custom external CSS files that render exclusively in a single browser. Only a few CSS hacks selectively import browser-specific CSS files like this. These are the ones I'll be analyzing in the next column.