Testing for Multiple Browsers
In the past decade, the web browser landscape has changed dramatically. At the end of the browser wars (Netscape vs Microsoft Internet Explorer), Microsoft was victorious, and Netscape seemed to lay floundering with no hope for recovery.
After Netscape’s quiet descent into the open source world, releasing Mozilla, and its eventual resurgence with Mozilla Firefox, developers who had become lazy, coding only for Internet Explorer (IE), were faced with a new dilemma.
Microsoft ending support for its IE version for Macs also helped to usher in a new browser from Apple: Safari. Add Opera and now Google Chrome, and the chance that coding for one browser and actually having your site look the way you intended on all the others, becomes very slim.
Browser market share aside, it is just part of web design best practices to make sure your website can reach as wide of an audience as possible. That means developing sites that work on desktop browsers, tablets, netbooks, screen readers, and mobile phones.
The easiest way to ensure cross-browser compatibility is to code according to W3C standards. Unfortunately, even that alone will not guarantee your site will be uniformly identical across all browser platforms. It will require testing, re-testing, and patience.
There are a number of issues to consider when designing for multiple browsers:
1. XHTML support – At this time, most current browsers support all XHTML functions, but you may still need to check some.
2. CSS support – This is spotty, depending on the browsers. There are some features Microsoft may choose to never support.
You will have to evaluate browser compatibility for CSS on a per-selector basis. None of the browser makers implement support for a particular version of CSS across the board. Instead, adoption is gradual, and more support is typically added with each release.
CSS2 is currently supported on IE8, IE9, Firefox 3.x, Safari 4 and 5, Google Chrome 4 and 5, and Opera 10.x.
IE8 does not come close to supporting CSS3, while the other above-mentioned browsers nearly support it but not perfectly.
For example, the box-shadow selector in CSS3 is supported by some but not others, and some of the browsers require specific indication that you are coding for them. IE 6, 7, and 8 do not support it at all, while IE9 is said to support it fully.
Firefox 3.0 does not support it, while 3.5 and later supports it with the -moz- indicator. Similarly, Webkit-based browsers like Safari and Chrome support it with a -webkit- indicator. Opera supports it since version 10.53.
My point in mentioning this example is to show you that, while there are some great features available in the newer standards like CSS3, you will still have to use some old hacks to get true cross-browser compatibility. For a box shadow, for example, you will have to rely on images, unless not having the shadow in some browsers will not affect the overall quality of the site.
3. Javascript – Here, the situation gets even more complicated. Javascript engines for the various browsers are very different, and even if they support the same features, they may appear different.
Like CSS, you will have to test each browser independently to get an idea of what is supported and what is not. You should also test for speed, as some javascript functions may be very slow in certain browsers.
4. Future features (i.e. HTML5) – All of the browsers still need improved support for future HTML features. There is nothing wrong with coding for the future to make sure your sites will stand the test of time and still be compatible with browsers that do not have support.
If you do include any HTML5 functions in your website (like the video tag for iPad compatibility), you should also include an alternative, since most browsers will not be able to view whatever you insert.
5. Backwards compatibility – The sad truth is that some people still have old computers with old browsers like Internet Explorer 6. You will probably not be able to make a site look perfect in newer browsers and IE6, but it does not hurt to make some effort to ensure your site at least still functions on antiquated technology.
To give an example of a feature that requires backwards compatibility, try testing PNG transparency in various browsers. Most browsers have supported it for quite some time, but Microsoft did not support it in IE6.
This means that the background of a transparent PNG image will not display correctly in that old browser.
To fix that, there is javascript code you can add to mask the lack of PNG transparency support and fool IE6 into displaying it correctly.
How to Test
I have repeatedly stressed that you need to test browser compatibility, but actually being able to do that may not be easy.
If you have a Windows computer, you will be able to test all of the major browsers: IE, Firefox, Safari (albeit not in a truly Mac environment), Chrome, and Opera. If, however, you are on a Mac, you will not have access to Internet Explorer.
There are a couple of options. One is to use a virtual machine like Parallels, Vmware, or VirtualBox (free) and install Windows in it. This will allow you to view IE performance in an actual Windows environment.
Another option is to use a compatibility site, a website that allows you to view how your website will look in multiple browsers. Some popular ones include:
- Browser Shots
- CrossBrowserTesting.com
- BrowserCamp
- Adobe Browser Lab
In addition, you should also run HTML and CSS standards tests:
- validator.w3.org
- jigsaw.w3.org/css-validator
It may be more difficult to find testing sites that accurately display how your site will look on a mobile browser, but most are based on one of the major rendering engines like Webkit, Gecko, or Opera’s engine.
If you are truly unsure, you can try some of the mobile browser emulators available for download.
Finally, always make sure your site is accessible and can stand up to odd resolution changes (especially common with digital projectors), and other atypical displays.
Once you have all of that settled, you can actually begin working on content.