Cross Browser Compatibility Guide

I've had my share of testing and debugging browser compatibility issues, and I'd like to share my experiences with you. I'll also tell you how to test browser compatibilities efficiently.

What extent of cross browser compatibility testing is considered "enough"?

The technical answer is it is never enough not because there are too many browsers but because there are too many versions of each browser and too many possible addons and plugins that can be installed on them. Since we can never catch every fish in the ocean let's just focus on the big ones shall we According to NetMarketShare, roughly

60% use IE (Microsoft Internet Explorer)
25% use Firefox
7% use Google Chrome
5% use Safari

But this data is not enough - You need to know what VERSIONS of each browser you need to test. Again according to NetMarketShare, in the descending order of percentage, roughly

24.5% use IE 8.0
17.5% use IE 6.0
15.5% use Firefox 3.6
12.5% use IE 7.0
6% use Firefox 3.5
5.5% use Google Chrome 4.1
4% use Safari 4.0

Therefore I'd say the extent of testing these browsers is considered enough.


That's still a lot! Any way you can cut the list down?

I totally understand your position, and I can tell you what browsers I test my websites on. I test IE 6.0, IE 8.0, Firefox 3.6, and Chrome 4.1. That's it.

I don't test Firefox 3.5 because the main difference between 3.5 and 3.6 is speed, as Mozilla claims. Therefore there's no much look-and-feel or layout difference between the two. I picked FF 3.6 because it really is much FASTER than 3.5

On the other hand, the main differences between IE7 and IE8 are the new features that IE8 offers. They both comply with DOM Core, DOM HTML, etc. although IE8 complies better with CSS 2.1 selectors and declarations. If you don't use any crazy CSS selector such as :before and :after and :hover and :active then you should be fine. My websites are not that CSS crazy and I can get away with it. If your websites are CSS mad then you need to test both IE7 and IE8.

I don't test Safari because I am using Windows. Lame excuse I know but I used Safari for two years before and it is a very modern browser and supports all the basic W3C standards very well. So I trust it.

So there you go: just test IE 6.0, IE 8.0, Firefox 3.6, and Chrome 4.1 and you are good to go.


IE6 and IE8 at the same time? How do I install them at the same time?

Simply download the Multiple IE application from TredoSoft and it allows you to test IE3, IE4, IE5, IE6, in addition to your existing IE8 browser (if you have IE7 simply upgrade to IE8). Once you install go to Start -> All Programs -> MultipleIEs -> Internet Explorer 6.0.


IE 6.0 is so old school, can I skip it?

NO YOU CANNOT. I can't stress enough that you MUST test IE6 because it is still widely used, and it is VERY problematic. One of its most serious bugs is that you cannot use mouse to select text of some webpage. Anyway IE6 is still quite modern and supports basic standards decently. You can use Prototype, JQuery, etc. and it'll work in IE6 sometimes with tweaks. Once you make sure your website renders fine in IE6 you can almost rest assured that it renders fine in the remaining major browsers If somehow you cannot install Internet Explorer 6 on your Windows refer to How to install IE6 so you can test your website to solve this issue!


Any reference you recommend?

Yes I recommend QuirksMode.org as it lists all the browser quirks in nice graphs. You can find out which CSS and DOM aspect is supported by which browser and which version. It's EXTREMELY useful.