Skip to main content

What’s Super About SuperPreview?

Author: Steven Guttman, Product Unit Manager for Expression Web
Web Site: http://blogs.msdn.com/xweb/

Expression Newsletter, subscribe now to get yours.

In 2000, I was on a panel at the PC Forum show, demo-ing my company’s cool new DHTML application. The app worked best in Internet Explorer, although we had a crippled “view-only” mode that was available to users of Netscape Navigator. And, so, the panel’s moderator asked me the obvious question: “Is making applications work across different browsers the cross-platform problem for the Internet age?”

Yep—without a doubt. In many ways, making sites render consistently across browsers is one of the biggest challenges faced by web site and web application developers. SuperPreview helps web site authors address an important part of that problem—namely, how to identify and fix cross-browser layout issues.

Of course, SuperPreview isn’t the first tool to allow enable people to compare their sites in different browsers. There are a variety of web services, such as Browsershots, Browsercam and Adobe’s new Browserlab that, can take snapshots of a page in multiple browsers. So, what makes SuperPreview different?

When we were developing SuperPreview, we looked at these solutions and saw a number of shortcomings:

  1. They only work on public URLs. Cross-browser compatibility is something you definitely want to address as you’re developing your site. SuperPreview can work both on public URLs and on your pages in development (note: Adobe claims Browserlab will eventually work on local pages).
  2. They’re slow. We wanted SuperPreview to be fast! Rendering a web page on a server farm in the cloud, taking a snapshot and then sending it to your local machine isn’t like doing a Google search. It doesn’t typically happen in a few seconds. This is especially true for pages living on your local machine where all your page assets (css, imgs, js) need to be packaged up and sent to the server and unpackaged before they’re rendered. Also, ASP.NET and PHP pages need to be run thru through a local server before they are packaged. That all takes time.
  3. They only give you an image. A set of browser images is a good start for cross-platform debugging, but it really doesn’t get you very far. We wanted users to be able to not only view cross-browser anomalies, but to get help in figuring out what page elements are causing problems. To this end, SuperPreview provides tools that let users interrogate page elements thru the HTML DOM (document object model) to determine the source of incompatibilities. 
  4. They don’t integrate well with your authoring tool. We wanted real browser renderings to be available as you’re doing authoring. That way you can quickly see changes as you’re editing. Service-based debugging can’t offer this, and Webkit-based renderers don’t give you visualizations that match shipping browsers.

The approach we took with SuperPreview is distinct from the service-based approach. Here’s a quick tour of Expression Web SuperPreview.

In SuperPreview, you’re always comparing two browsers at a time—what we refer to as your baseline browser (typically the one that you used to validate your original design), and one other. You can load up many more browsers, but you are always comparing your baseline browser against one other. For this article, I’ve loaded 4 browsers (IE8, IE6, FF3 and IE8 running in IE7 compatibility mode), and am comparing my baseline IE8 against IE6. These are the browsers SuperPreview initially supports, and we are looking at incorporating additional browsers in the future.

Side-by-Side View

By default, SuperPreview comes up in side-by-side mode with the Selection tool active. This tool highlights the bounds of HTML elements using the extents calculated by the browser when it renders the page. Note that the element size and position are shown in the lower left of each screen, and the positions of the selected element are shown by the shaded outlines.

Figure 1. SuperPreview in Side-by-Side mode 
(click image to zoom)

Overlay View—“Onion-Skin”

The overlay view shown below allows users to “onion-skin” two renderings together, which helps highlight significant differences. In either of these modes, I can click on any of the other browsers in the browser list (at the screen bottom) and instantaneously see that browser rendering. Additionally, if I have based my page layout on a PSD design, I can load up the Photoshop™ file as one of my comparison “browsers.”

Figure 2. SuperPreview in Overlay Mode
(click image to zoom)

DOM View

In this example, there was clearly an issue with the position of the Expression logo. This appeared to be an issue with IE6 (what a surprise). One of the unique aspects of SuperPreview is that it provides a DOM view of the baseline and comparison browser pages. You access the DOM view by clicking on the DOM tab at the bottom of the page. The DOM view can be used as a navigation tool by using the arrow keys, as well as a means for gathering information.

Figure 3. SuperPreview in Side-by-Side mode showing the DOM tree 
(click image to zoom)

In the case of the misplaced logo, I used the DOM view to check the <div> containing the logo and its containing <div> for peculiarities. I also confirmed that the logo was rendering correctly in Firefox, IE7 and IE8. The position of the logo is about twice as far from the left margin as it should be when displayed in IE6.

Debugging with the New Snapshot Panel

This is where authoring tool integration with cross-browser debugging really helps make your workflow better. And, this is where Expression Web 3 hums… Moving back to Expression Web, I switched to Code View and brought up the new “Snapshot” panel from the Panels menu. Snapshot lets me preview the page I’m working on using any of the browser engines available to SuperPreview, and automatically updates whenever you save your page.

Yep—that means I can preview IE6, IE7, IE8 or Firefox directly in Expression Web, and get that preview to update as I’m editing! (Note: This is a page rendering, and not a fully interactive web page)

Setting Snapshot to IE6 mode, I got the same preview I saw when viewing it in SuperPreview.

Figure 4. SuperPreview in Expression Web’s Snapshot Panel 
(click image to zoom)

Selecting the <div> for the logo and bringing up the CSS properties panel, I saw that the margin was set correctly, and that there was no padding applied to the element. Because the box model is broken in IE6, adding padding or margin to page elements having specified widths can shift their internals contents in unanticipated ways.

Since, I was clearly dealing with an IE6-specific issue, I visited one of my favorite sites that compiles IE peculiarities, positioniseverything.net ( http://positioniseverything.net/explorer.html). There, right in the table of contents, was the Doubled Float-Margin bug. I’ve also had good luck with Chris Coyier’s CSS-tricks site, http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/.

Figure 5. The doubled float-margin bug on positioniseverything.net

As it turns out, in IE6, if you add margin to a floated element in the same direction that element is floated (float:left, margin-left, or float:right, margin-right), IE6 will double the margin width. Go figure… Fortunately, the solution is bizarre, but very simple. Setting the CSS display property to display:inline fixed the problem.

Figure 6. Fixing the doubled float-margin bug

Conclusion

The combination of SuperPreview and Snapshot in Expression Web 3 provides Web authors with a powerful tool for visualizing and debugging cross-browser layout issues. The product team is excited about shipping this feature, hearing about how people are using it, and hearing your ideas for future refinements.  Feel free to email me at sguttman@microsoft.com with comments or suggestions.

To learn more about Expression Web and SuperPreview, check out: