Expression Studio 3 has a great new feature that was announced and demonstrated back at the Mix 09 conference called SuperPreview.  It allows you to compare how a page looks across multiple browsers including IE6, IE7, IE8 and FireFox (with more reportedly coming in the future).  In this post I’m going to provide a quick look at SuperPreview and walk you through some screen shots to get you started using it.

After installing Expression Studio 3 I opened SuperPreview and saw the browsers shown in the image below.  The first thing you’ll notice is that you can test IE6.  Although I personally wish this browser would die and go away, my company still works with several clients who have large IE6 deployments across the enterprise so it’s nice to be able to test it easily.  Previously I used IETester (which works quite well) to test different versions of IE.

I’m a big fan of the new Safari 4 browser for Windows and wanted to be able to test against that as well but it’s not currently supported.  Based on various Microsoft blog posts I’ve seen they’re planning to release support for Safari and other browsers later so I’m hoping that’s the case.  To see how a site looks in multiple browsers select a browser on each side of the SuperPreview interface by clicking the browser icon, type the URL to test into the Location textbox (at the top center of the SuperPreview window) and hit Enter:

The browsers that your testing will show at the bottom of the screen and you can even test in different resolutions by clicking the Browser Size drop-down in the bottom-right corner.  Click the X icon next to a browser to remove it.

If you’d like to test multiple browsers in one window and compare them against a baseline browser you can select a browser on the left side followed by another browser from the right side.  Then click the + icon at the bottom left of the screen (to the right of the second browser) and add others.  Here’s what it looks like after selecting several browsers:

SuperPreview also includes a DOM viewer that can be used to compare the DOMs across multiple browsers.  To use it click the DOM tab located in the bottom-right corner of the SuperPreview window.  Once the DOM window is showing you can click on anything within the browser preview windows and you’ll see the associated HTML tags and CSS styles associated with the element:

You can also drag the ruler onto pages to compare how things line up vertically and horizontally:

Finally, you can overlay browsers to see how pages match up by clicking the D key.  Here’s an example of overlaying Firefox 3.5 and IE 6 screens (brace your eyes since it creates a blur type of effect…gotta love IE6):

There’s more you can do with SuperPreview but the features shown here are quite important when you’re trying to make sure a site looks good across multiple browsers.