Solving Once and For All Cross Browser Compatibility

// October 22nd, 2009 // CSS

by William

I’ve done some thinking about how to approach this better…Here’s what I’ve come up with. It starts with the worst and gets better, not the other way around.

This method also accounts for browser usage stats.

1. Get a workable second computer with IE installed. Nothing special. Just something that turns on and loads/reloads Explorer.

2. Create 1st Design on/with IE. Go for 6 (19.6%). Now you can finally >:XX (get rid of designing for) IE5 (0.1%). By my quick calculations, IE6 could be with us for another 3-4 years. Unless usage trends change dramatically with Firefox/Chrome/Other new Browser. Kinda depends on the rate at which people are buying new computers.

3. Check to make sure code validates.

4. After first version is done/concluded, name the CSS “explorer.css” and put it away. That’s your IE version and should only be changed when absolutely necessary.

5. Create filter system for CSS to steer IE to explorer.css (Watch out for Linux going to that file). May need javascript. When loaded with other OSs, the page should be unstyled.

6. After transferring file, turn off old computer. Design now for firefox (44.4%), with all the bells and whistles you want. Css Code can be new or different or whatever you want. One programmer even creates different versions for “modern browsers” and provides a basic/less-pretty version for IE6 (Transcending CSS book).

7. Check again that new code validates.

8. Check for Safari (2.7%) and other OSs like Chrome (3.6%) and Opera (2.4%). Some give and take might be necessary here, but tweaking should be minimal, since they’re all good browsers.

9. Final check for IE7/Vista (Find a machine that runs it). If it needs tweaking, use IE conditional comments. Could just skip to #10 if you can’t get it.

10. Go to browsershots.org and cross your fingers.

Leave a Reply