Has Microsoft solved our stylesheet woes with Super Preview?

One of the more onerous tasks for any new website is building its stylesheets. Thankfully, there are many tools available to help you create styles and get the syntax correct, and even the Design View modes of authoring tools such as Microsoft’s Expressions Web and Adobe’s Dreamweaver do a reasonable job of showing the effect of most style changes.

I say “most” changes because, despite years of development and user pleading, web design tools still show only an approximation of what your page will look like if you’re attempting anything but the simplest design.

When coupled with the fact that different browsers render styles differently depending on their interpretation of the W3C standards (or, in some cases, because they have badly written rendering engines), this makes the chances of your design tool accurately rendering what any particular browser will display fairly hopeless.

This mess is what we have to work in, and most web developers will keep as many of the major browsers as possible installed on their development machine so they can test pages and adjust style rules accordingly. However, it’s impossible to have all major browsers installed on one machine without resorting to virtual machines, because different versions of the same browser can’t co-exist on the same OS.

It’s impossible to have all major browsers installed on one machine without resorting to virtual machines, because different versions of the same browser can’t co-exist on the same OS

I’ve heard some “designers” argue that they only design for browsers X,Y and Z, because the users should upgrade to the latest version since upgrades are free. The trouble is that, for PCs running on a company network, the option of downloading the latest browser version isn’t available because of administrator lock-down, and in such cases the user is stuck with whatever browser the admin allows, often some elderly version of Internet Explorer on Windows machines and Safari on Macs.

While IE7 and IE8 render similarly to Firefox, Mozilla and Chrome, the same can’t be said for IE6.

IE6’s problems have been well documented, but the fact remains that as a web developer you need to create pages that will render correctly (or as near as you can get) in IE6 for those users who are unable to upgrade. Users of Firefox, Opera, Chrome and Safari are generally willing to upgrade and so you might perhaps legitimately ignore older versions, but before making any major decision about what browsers not to support, look at your web server logs to see what is actually being used.

Bear in mind that the reason those logs may not show many hits for, say, Netscape 3 may be because it can’t see anything beyond your homepage using your current code.

This process of testing web pages in different browsers is long and tedious, and anything that can help is most welcome. Microsoft recently released a tool called Super Preview, which enables you to preview a page in two browsers at once, side by side, and compare rendering differences in various areas.

The idea is that you set up Super Preview with one browser as its “base” browser whose rendering you consider correct, then switch between several other browsers in the other panel. The aim is to achieve pixel-perfect rendering between all browsers, but if this truly is your aim then good luck! More realistically, if you aim to get the pages to render in a similar way between all browsers, this looks on first impression to be an excellent tool.