About 7 years ago, the browser wars were over. Internet Explorer had become the de facto standard, and for a while, there were very few compatibility issues in web page design.

Today’s browser wars make the late 90’s look like a minor skirmish. In addition to Firefox and IE, we’ve got multi-platform versions of Safari, Opera, Chrome, and a wealth of mobile phone browsers. In addition, there are multiple versions of all these browsers, many of which have different rendering idiosyncrasies (I’m talkin’ about you, IE6/7/8).

In speaking to web developers, we heard that designing web pages for multiple browsers was a major pain point (and a major pain). In addition to the time it takes to preview pages in multiple browsers, there are a host of other issues:

• Most browsers can’t have multiple versions installed side-by-side. The newest version replaces older versions. So, you can’t have IE6 and IE7 on the same machine (unless you’re using virtual machines or unstable registry hacks).
• Many browsers support both Mac and Windows. Devs want to test in (at least) Mac Safari, which doesn’t render the same as Safari on Windows.
• he ergonomics of browser testing is awkward. Many devs load their site on a staging server and have a battery of machines running different browsers. They have to manually load a page in each machine and then walk to each individual machine to compare the different monitors.

Microsoft built SuperPreview to simplify the process of testing and debugging layout issues across different web browsers and platforms. You can view your pages in multiple browsers simultaneously or view how a page renders in a browser and compare it to a comp or mock-up image of a page.

SuperPreview lets you view your pages in a variety of different ways. You can view browser renderings side-by-side horizontally or vertically, or overlay them to identify differences. You can use rulers and guides to measure and highlight visual problems. You can zoom in and out of a page and see all the browser renderings update in tandem.

There are a few big differences between SuperPreview and other browser comparison tools. All of the other tools we’re familiar with are strictly “service-based,” meaning that you need to point these services at a public URL, they render the pages in specified browsers on a set of remote servers, and then send you the results. This makes them slow, and it also makes it more difficult for them to work with pages under development (on your local file system). Although we are looking at a web service as well (for Mac browser renderings, among others), SuperPreview works directly with your installed browsers—meaning, you don’t need to package or publish your pages before using it. SuperPreview also includes the IE6 rendering engine, built-in. You can use it side-by-side with other versions of IE.

Other browser comparison tools show you only images of different browser renderings, allowing you to visually compare them. This only gets you part of the way. It helps you to identify problems, but doesn’t help you find the element that’s causing the problem. SuperPreview couples image renderings with DOM data, letting you highlight specific DOM elements within the image, and showing you differences across browsers. It also provides element information such as position, dimensions and ID. This helps you pinpoint the element that’s causing the compatibility issue.