15.2 Check Browser Support

As noted early in this book, different browsers don't always display HTML in the same way. What's worse, older browsers don't even understand a lot of the code that Dreamweaver can produce, because Dreamweaver may conform to HTML or CSS standards that were developed only in recent years.

The best way to ensure that visitors see your site the way you intend it is to frequently preview your pages in as many browsers on as many computers as possible. In this way, you can identify and fix problems early.

But if you don't happen to have old computers with old browsers lying around your basement, Dreamweaver can identify elements of a page that won't work in older browsers, or that might be supported by only a single browser. For example, the <layer> tag works only in Netscape 4, while the <marquee> tag is specific only to Internet Explorer.

NOTE

The Netscape <layer> tag is not the same as Dreamweaver layers (Chapter 9).

Dreamweaver MX 2004's Check Browser Support feature checks the HTML and CSS code of pages you've selected and tells you if you've used code that doesn't work in various browsers: Internet Explorer, Safari, Netscape Navigator, Mozilla, and Opera.

You can even specify which versions of the browsers you'd like to test, all the way back to the 3.0 version of Internet Explorer for Windows (which is still being used by Jason P. O'Gillicuddy of Muddy Ditch, Kansas).

NOTE

The Check Browser Support feature is an improvement of Dreamweaver MX's Check Target Browsers command. In fact, it's still called Check Target Browsers when you access the command from the File Check Page submenu.

In fact, each time you open a Web page or CSS file, Dreamweaver automatically checks the file's browser support. If the program detects an error, it displays a yellow warning sign on the Browser Check menu on the Document toolbar (Figure 15-1). You can choose Show All Errors from this menu to see the errors listed in the reports panel shown in Figure 15-2. Alternatively, you can choose FileCheck PageCheck Target Browsers to check the page and open the reports panel.

If a page has any code that a particular browser can't understand, the Browser Check menu lets you know with a yellow warning icon. Place your cursor over the menu button to see how many errors Dreamweaver found. To see a list of all errors, choose Show All Errors from the menu. (You can check an external style sheet the same way.)

Keep in mind that Dreamweaver doesn't actually test your pages in these different browsers. It merely compares the HTML in your page against a series of files—called browser profiles—that identify which HTML tags the various browsers understand. In other words, don't count on this feature to help you with the subtle differences between browsers—such as the way different browsers display CSS-based layouts as discussed in Chapter 7. Just because a browser can interpret a particular piece of HTML doesn't mean it always does the job correctly. Throughout this book, you'll find information on these kinds of problems, but there's no substitute for thoroughly testing your pages in as many browsers as you can find.

Once you've identified any errors, you can either choose to remove the offending code—perhaps by getting rid of a rollover effect, or abandoning CSS-positioning (see Section 8.3.1)—or live with the fact that not everyone on earth will be able to view your site.

If your Web site absolutely must work with older versions of browsers, you'll need to steer clear of most CSS-based layout and other new technologies, and use the Check Browser Support command. But before abandoning such useful and advanced features, keep in mind that well over 90 percent of the Web-surfing public uses version 5 or later of Internet Explorer or Netscape Navigator or one of the newer upstarts such as Safari or Opera.

As you might suspect, the older the browser you check support for, the more errors Dreamweaver is likely to find.

You can check an open page by choosing Show Errors from the Check Browser Support menu in the Document toolbar (see Figure 15-1), or you can check any or all pages in a site by following these steps.

Choose WindowResults and click the Target Browser Check tab.
The keyboard shortcut is F7. Either way, you open the Results panel to the Target Browser Check tab (see Figure 15-2).

Using the green arrow in the Target Browser Check panel, select which files to check.

Clicking the green arrow provides a menu with three options for checking pages (plus two preference settings described below). The first checks the page you're currently working on. The second option checks all pages in your site, and the final option checks only files (or folders of files) you've selected in the Files panel. (For tips on selecting files in the Files panel, see the box in Secion 14.1.5).

Dreamweaver 4 produced a Web page, rather than a dialog box, listing the errors. If you prefer that view, click the globe icon in the Check Target Browser panel (see Figure 15-2). To save a file with the results, click the floppy disk icon. But because this option saves all of the error information into an almost indecipherable XML file, you'll probably not find much use for it.

Review the results.
The results list displays three columns of information: the name of the file with errors, the line number the error occurs on, and a description of the error, including which browser won't work with the code. (The line numbers refer to lines in the HTML code of your page. See Chapter 10 for details on Code view.) An error appears when a browser doesn't understand a particular HTML tag or property. For example, Internet Explorer 3 has a very limited understanding of JavaScript; therefore, you'll see an error listed for every page where you used an image rollover effect (Section 5.5). The error indicates that IE 3 doesn't understand the JavaScript code, and the rollover won't work.
NOTE

Of course, this is an extreme example; realistically, no one uses Internet Explorer 3.0 any more. Fortunately, Dreamweaver MX 2004 gives you a way to specify which browsers to check against, so you don't have to wade through line after line of errors that apply to some Web browser not available since the Paleolithic era (you know, the one that the dinosaurs in Jurassic Park used to sell fossils on eBay).

Don't panic if you run this command on your site and see lots of errors. The errors don't mean that you made mistakes. They simply indicate that one of the browsers you selected doesn't understand some of the tags Dreamweaver inserted.
NOTE

If you work in Code view or Split view (see Section 10.2), Dreamweaver also underlines browser check errors with a squiggly red line. To read a tooltip describing the error, move your mouse over the red line.

Furthermore, Dreamweaver is often smart enough to use two tags—one for Navigator and another for Internet Explorer—to get the job done. For example, when inserting Flash movies into a page, Dreamweaver uses the <object> tag and the <embed> tag. The <embed> tag is intended to allow Netscape Navigator 4 browsers to correctly view the Flash movie, while the <object> tag works with Internet Explorer and later versions of Navigator. Because Navigator 4 doesn't understand the <object> tag, you'll still get an error if you check your page against that browser, even though the <embed> tag Dreamweaver inserted means the Flash movie will work in Netscape 4.
In other words, an error reported by Dreamweaver doesn't necessarily mean that your page won't work in a specified browser. Since your site's visitors may not even be using Netscape 4, this is another reason to make sure you check only for the browsers that actually visit your site, as described in the next section.

This command is a good way to quickly learn about the different HTML tags each browser recognizes. In time, you'll probably know enough to avoid using elements that don't work for the browsers your visitors use, and you'll find this command unnecessary.

15.2.1 Editing the List of Browsers to Check Against

You probably won't need to check all of the browsers and all of their versions. Few (if any) people still use Internet Explorer 3 for Windows, for example. As mentioned earlier, the most important consideration is making sure you meet the needs of your site's audience: if they're all on Windows machines, check Internet Explorer for Windows. A site that includes a lot of Macintosh visitors had better be prepared for Safari (Apple's new and powerful Web browser).

Dreamweaver MX 2004 can check a lot more browsers than previous versions of Dreamweaver. To customize the list of browsers you want to check against, choose the Settings option from one of two places:

the green arrow menu in the Target Browser Check tab of the Results panel (see Figure 15-2)
the Check Browser Support menu in the Document toolbar (see Figure 15-1).

In either case, the Target Browser window appears (Figure 15-3). The window lists six different browsers and includes a submenu where you can select a version number. Dreamweaver will check the support of any browsers that have a checkmark in the box.

In addition, you can specify a minimum version number from the menu to the right of the browser name. For example, if your site doesn't have any visitors using version 4 of Internet Explorer (a likely scenario), choose 5.0 from the menu. Dreamweaver will check only for compatibility with versions of Internet Explorer that are 5.0 or greater.

You can check the HTML of your pages against the capabilities of any or all of the browsers listed. Use the menu next to each browser name to select which version of that browser you want to check against. Try to limit your choices to the browsers your visitors will likely be using. If you choose an old, little-used browser like Netscape Navigator 3.0, Dreamweaver will generate an unnecessarily long list of errors, since much of the HTML code Dreamweaver generates wasn't even around back when Navigator 3.0 was written.

< Day Day Up >