One of the wonderful things about the internet as a medium of communication (and/or art) in general is the personalization and choices it relatively open nature nurtures. The user can choose to view a web page or application on the OS of their choice, screen resolution, color depth, with JavaScript, flash, active x, etc… and of course the web browser of their choice.

It isn’t possible to test every combination, but developing a site for only IE 6 isn’t really a reasonable option anymore (and isn’t very fashionable either). We’d like to share some of the conclusions we’ve come to (which may or may not be applicable to you – first going over some design philosophies and then examining the major browsers out there and our attitude towards supporting them). If you’re experienced in coding CSS you can skip the Coding Suggestions section and jump to Browser Analysis.

Coding Suggestions

1. Zero out margins and padding! While most browsers render list items (for example) correctly, the specifications are loose enough that they do it in different ways. Some pad each layer 20 pixels, others give it a margin – if you don’t zero things out and wish to change the indent of list items it’ll be frustrating to say the least.
2. When designing a (X)HTML/CSS site, test the basic structure in all browsers you intend to support before inserting a bunch of cosmetic styling. Having a smaller stylesheet makes it easier to isolate what is causing rendering errors, and you can easily apply borders / background colors to floated / positioned elements and see where exactly things are going wrong.
3. Test the site in a modern standards compliant browser and then check/hack/modify to make it render in IE < 6. If someone visits the site in a newer browser you didn’t explicitly test there is a better chance of it rendering correctly. Here's a handy breakdown of tag support in IE 6, Firefox 1.0, and Opera 8.
4. Use @import to load stylesheets so older browsers with extremely dodgy CSS support don’t end up trying to render the stylings.
5. If there is a simpler way to do something, use it. Sometimes you need IE hacks, but if you can achieve what you want to do without using floats, chances are you’ll have less to worry about later. Integrated Web Design: Strategies for Long-Term CSS Hack Management is a good article to read, positioniseverything is a good first stop for finding out about hacks. Using selectors to isolate code is one approach to fixing certain rendering errors, and this chart does a wonderful job of showing what selectors browsers support.
6. If you’re working from a template, test it before changing anything to make sure the author knew what they were doing when they put it up for the world. Many, sadly, have not been tested against anything except IE 6 (and perhaps the latest Firefox build). Some good resources for structural templates are “bluerobot’s layout reservoir”: http://www.bluerobot.com/web/layouts/, glish.com’s CSS Layout Techniques: for Fun and Profit, and positioniseverything, etc.

Browser Usage

Statistics for the ISIS login pages as of November 2005 are as follows:

Browser (all versions)    Visits      Percent    Hits
----------------------    --------    --------   ---------
Internet Explorer         327,823      69.44%    2,457,596
Mozilla/Firefox           102,181      21.64%      254,930
Safari                     31,258       6.62%       73,303
Netscape                    6,595       1.40%       16,446
Opera                       1,062       0.22%        2,513
Others                    *******      ******    *********

For IE, IE 6 dominates, taking up 67.65% of that 69.44%. Most Mozilla builds came from Firefox 1.07, 1.06, 1.04, 1.0, and 1.03. For Netscape, over 6,000 of the 6,600 visits came from some versions of 7.0 or 8.0. There are less than 100 visits from Netscape 4.x browsers. The vast majority of login’s are for MyUcla, which skews statistics towards what students use, with the rest being mainly staff or faculty logins.

For a wider look at things Global statistics for October 2005 provided by thecounter.com show a smaller Firefox footprint than is reported in most other places (or itself in the past) but the global stats are a useful take-with-a-grain-of-salt resource. Again it’s up to you to determine what you specifically need to support… the list below

Browser Support

Browser support is broken into 3 categories: those that pages are expected to render perfect (or near perfect in), one in which noticeable aesthetic glitches are allowed but the site has full functionality, and those which simply are not worth supporting (unless you feel like it, receive enough requests/etc).

Full Support

Internet Explorer 6.02 – This browser is by far the most widely used in the world, and with IE7 being XP/2003/Vista only it’ll be around for quite a while. CSS 2 support is extremely buggy but well documented. Once Dean Edward’s IE 7 script matures a bit it should be fairly easy (at a bandwidth / client load cost) to have IE 5-6 render at or above most other major current browsers.

Internet Explorer 7.x – PENDING – A long list of IE 6.x rendering bugs are slated to be fixed… this long due update to the IE line should render closer to most other major browsers.

Firefox 1.0x & 1.5 – With the exception of a fairly major float bug in some of the 1.0x releases you shouldn’t see too much variation… many of the 1.5 rendering updates are adding support for specs that are not in wide use at the time. As the BOL approved browser, market penetration usually projected in the double digits, and Google pitching in on the marketing it isn’t a browser to be ignored. This should basically cover most modern Gecko based browsers (Mozilla, Netscape 8, Camino etc). As a cross platform browser you will know that people using Windows, Macintosh, Linux, etc can see your site.

Safari 1.0 and/or Latest – As the default browser for most OSX releases this deserves to be tested for. Unfortunately revisions past 1.0 are not available unless you upgrade past 10.2 so this remains the baseline to test for. It is up to you if you want to just code for the latest release, 1.0, or both.

Opera Latest – Not a huge footprint but it is widely used, and if your page works in Safari and Firefox it should take very little effort to render in the latest version of Opera. As an enthusiast browser it is fairly safe to assume that users will either upgrade or be aware of the pitfalls of choosing not to do so.

Minor Aberrations Supported

Internet Explorer 5.2 Mac – The default browser for earlier OSX builds and some later pre-OSX Macintosh builds. Aside from a few known bugs it has stronger CSS rendering support than IE 6.02 for windows.

Internet Explorer 5.0 and 5.5 – Thankfully not as relevant as they used to be. You will necessarily lose certain aesthetic features (dashed borders, etc) as you go back. Don’t spend too much time on it but at least make sure there aren’t any rendering issues that render the site unusable. An easy alternative would be to run Dean Edward’s IE7 Script.

Netscape 7.x – Pick any build from 7.0 to 7.2, later builds are more stable but less representative of the line as a whole. You can alternatively download the corresponding Mozilla release… Netscape 7.01 is Mozilla 1.0.2, etc. Again, don’t spend too much time on it but at least make sure there aren’t any rendering issues that render the site unusable.

Not Worth Worrying About

Internet Explorer and Netscape 4.x – An @import defined stylesheet won’t load leaving users with a simple textreader-esque page. You –could- try using the normal link rel to load a basic stylesheet than @importing more complicated styles on top of that but it is really messy.

iCab, Openweb, etc – Older versions have very bad CSS2 rendering, if nice UIs. Given Macintosh penetration in general and alternatives for that OS already supported these probably aren’t worth your time.

Older Opera Releases – Again this is an enthusiast browser, recent versions should render fairly well. It’s not really a priority.

Linux Specific Releases – Safari is built of the khtml codebase, so Konqueror should render fine. Given support for Firefox and the enthusiast nature of most Linux users they should be able to find a browser that renders standards compliant coded pages.