Testing CSS - HTML5 - page 32

The most direct method to view the results of your CSS is to install as many browsers as you can on
your system and open the associated pages in them. Luckily, all modern browsers are freely avail-
able, including all of these:

➤ ➤

Microsoft Internet Explorer

➤ ➤

Mozilla Firefox

➤ ➤

Apple Safari

➤ ➤

Google Chrome

➤ ➤

Opera

All but IE allow you to easily install multiple versions of their browsers. To
maintain access to older versions of IE, you'll need to use virtualization soft-
ware like Microsoft Virtual PC or a utility such as IETester. IETester is a free
program that allows you to check pages on a full range of Internet Explorer
versions from IE 5.5 to, as of this writing, the preview version of IE 9. You
can find IETester, as well as other handy debugging tools, at http://www
.my-debugbar.com .

Another method for seeing how your web pages look in a range of browsers is to use an online
service. A number of companies have set up virtualization servers that render any submitted
URL and then display a snapshot of that rendering. Services such as BrowserCam ( http://www
.browsercam.com ) m ake it possible to review rendered pages on a full set of devices. A relatively
recent entry, BrowserLab, comes to the field from Adobe ( https://browserlab.adobe.com ).
Though BrowserLab offers tight integration with Adobe's web development software, Dreamweaver,
it is also available on its own. As shown in Figure 5-3, BrowserLab offers the ability to compare the
same page in two different browsers simultaneously. You can also overlay one browser page on top
of the other with variable transparency in the Onion Skin mode. BrowserLab is free to use with an
Adobe ID, which is also available at no charge.

Once you've uncovered a problem, how do you fix it? The most basic approach is to modify the CSS
in your editor, save the page, and review. Though this technique is effective, its repetitive nature can
be very time-consuming. A variety of browser-based tools have emerged to help you hone in on the
problem without relying on the update-save-preview cycle.

For example, Firefox users can install a free extension called Firebug ( http://getfirebug.com )
that allows you to view the CSS of any web page and even make changes in real time. In addition,
you can highlight page elements and follow the HTML code tree to hone in on problem areas. The
same organization makes a Firebug Lite, which can be used with other browsers.