There are lots of ways to test for multiple browsers. Way back in the good ol’ days we had our own little browser ghetto—a seedy corner of the office where dusty, dishevelled computers and their unloved browsers gathered. Testing involved that most despised of activities: walking across the office.
Later, we installed virtual machines with different browser versions and different operating systems—a hefty investment of time, energy, and often machine-grinding frustration.
Other developers subscribed to solutions involving online tools such as browsershots.org, which render your pages in multiple browsers and return those renderings to you as bitmap images. Unfortunately, this approach is often slow and cumbersome, and only works on public URLs, which makes it difficult to debug as you’re building a site, and certainly doesn’t integrate easily with your development tools and lifecycle. More critically, none of these bitmap-based approaches allow you to debug beyond simple layout tests. For example, they offer none of the DOM inspection tools that you’d expect in a layout debugging system.
A little over a year ago, Microsoft released its first concerted attempt to make Internet Explorer testing easier: the SuperPreview—er…preview. In the year since its test-launch, a number of notable events have taken place.
Firstly, SuperPreview now incorporates non-Microsoft browsers into its test bed, which means you no longer need to switch out to test Firefox or Safari. It’s also become a much more mature, finished product. Finally, SuperPreview has been integrated into Microsoft’s main web development play, Expression Web.
So, if you’re late to the SuperPreview party, let me give you the executive summary.
When you’re done, remember to have a go at our Microsoft-sponsored Article Quiz.
From Expression Web, launching SuperPreview for the current page is simple: choose from the menu. Once SuperPreview loads, you’ll see the display shown in Figure 1, “SuperPreview awaiting browser selection” as the program waits for you to select your desired browser.
Select Internet Explorer 8, on th left-hand side, as shown in Figure 2, “Selecting IE8”.
And on the right, click on Firefox 3.6.3, as shown in Figure 3, “Selecting Firefox 3.6.3”.
And voilà! You now see a side-by-side comparison rendering of your page like the one shown in Figure 4, “Comparing the site, at a glance, in different browsers”.
If you want to test the page in other browser versions, simply click on the add ( button next to the browser you need, as shown in Figure 5, “Adding more browser versions to the test”.
So, which browsers are supported by SuperPreview? Out of the box, the tool supports IE6, IE7, IE8, and IE8 in Compatibility Mode. To add Firefox, simply install th browser on your machine.
Interestingly, SuperPreview also supports Safari 4.0.4 on OSX. I’m sure you’re a little curious as to how Safari on OSX magically renders on a Windows PC. The answer is that Microsoft has implemented a web service that renders Safari on OSX in the cloud.
To enable this feature, simply click on the Remote Browser button on the main tool bar, as illustrated in Figure 6, “The Remote Browser button”.
You’ll be prompted to sign in for a free Remote Browser account. And from now on, whenever you choose to get a page render using Safari on OSX, SuperPreview will call the web service and bring back a render. Pretty cool, eh?
Alex WalkerAlex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for SitePoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Co-author of The Principles of Beautiful Web Design. Now Alex is involved in the planning, development, production, and marketing of a huge range of printed and online products and references. He has designed over 60+ of SitePoint's book covers.
