When Written: Oct 2009
When designing a new web site, one of the more onerous tasks is the building of the style sheets. These change your basic text web pages to something that has some sort of design applied to it so that the client or the designer’s vision is implemented. The difference between what they want and what is achievable is now often minimal and, thankfully the many tools available to help in the creating of styles and getting the syntax correct make this a much easier task.
Even the design view mode of such programs as Microsoft’s Expressions Web and Adobe’s Dreamweaver do a reasonable job of showing the effect of most of your style changes. I say most of the changes because, despite years of development, and the user pleading, web design tools still only give what can best be described as an approximation of what your web page will look like if you are trying anything but the simplest of styles. This coupled with the fact that different makes of browser will render styles differently depending on their interpretation of the W3C standards or, in the case of some, just because they had badly written rendering engines makes the task of a design tool being able accurately to render what a browser will display a fairly hopeless task.
This mess is what we have to work with and most web developers will have as many of the major browsers as possible installed on their computer so that they can test their pages and adjust the style rules accordingly. It is, however, impossible to have all major browsers installed on one machine without resorting to virtual machines simply because different versions of the same browser will not co-exist on the same operating system. I’ve heard some ‘designers’ argue that they only design for x,y and z browsers because the users should upgrade to the latest version as the upgrades are free.
The trouble with this somewhat blinkered view is with machines running on a company network, the option of downloading the latest browser version is not available to the user because of administrator lock-down. In these cases the user is stuck with the browser that the administrator allows, so often this is a version of Internet Explorer on Windows machines and Safari on Macs. Whilst IE 7 and in particular IE8 render very similarly to the other browsers like Firefox, Mozilla and Chrome, the same could not be said about IE6 and we won’t even talk about IE before version 6. IE6’s problems have been well documented but the fact remains that you as a web developer need to develop your web pages to render correctly ( or as close as you can get ) in IE6 as often users are unable to upgrade the browser. Users with Firefox, Opera, Chrome or Safari are generally able to upgrade and so you could perhaps legitimately ignore older versions. Before making any major decisions about what browsers not to support you should look at the web server logs to see what is being used.
Bear in mind that the reason that the logs may not show many hits for Netscape 3, for example may be because anything other than the home page is not viewable using your code. This process of testing web pages in different browsers is long and tedious so anything that could help is most welcome.
On the left we have Firefox and on the right IE6 the small changes in position are caused by IE6’s broken ‘box’ model
Microsoft recently released a tool called ‘Super Preview’ which enables you to preview in two browsers at once and to easily examine the rendering difference of various areas on the web page in question. The idea is that you set it up with one browser as a ‘base’ browser, i.e. the correctly rendering one, and you can switch between several other browsers in the other panel.
The suggested use is so you can get pixel perfect rendering between all browsers. If this is truly your aim then good luck, because you will have a pile of work on! But more realistically if you aim to get the pages to render in a similar way between all browsers this looks at first glance an excellent tool. What caused quite a stir at the time was that you could render a web page as if the user’s browser was IE6 as well as IE7 and IE8 despite the fact that these three browsers will not reliably co-exist on the same machine. Even I was at first impressed by this, and it was not until I had to use it on a real project that the cracks started to show.
There are currently two huge drawbacks to ‘Super Preview’ that I see. The first is that no JavaScript will run within Super Preview. When you consider that in this day and age almost all web sites will use some JavaScript to produce AJAX type of user interactions then this limitation really limits the usefulness of Super Preview as it will not let you test your styles in any areas that appear on command from some JavaScript. The other limitation is that it doesn’t render some web pages in its IE6 mode exactly as IE6 would render it when running on a separate machine; the differences that I have found so far are small but any differences mean that you can’t totally rely on it for testing your style sheets.
When it comes down to it there is still no substitute for using the browsers themselves to test your web pages. In the web designer’s nirvana one day we will have a common rendering engine that all the browsers use, the differences being extra functionality added by the various developers rather than different interpretations of the W3C standards. Even obvious stuff like how the width of an element should be calculated or a table tag is rendered are apparently not so obvious, for example.
Article by: Mark Newton
Published in: Mark Newton