HTML and CSS

Scripting and Browser Concerns

In some instances, people are using old browsers with no JavaScript support or poor support for the script element itself, or have JavaScript disabled. Working around these issues requires some additional markup.

NOTE

Most contemporary web designers do not use the workarounds here unless they absolutely know that they have to support older browsers. However, you might want to use them. At the very least, it's important that you see these techniques in action so you'll recognize them when viewing HTML from other sources.


Hiding Scripts from Older Browsers

If you're using embedded JavaScript, some older browsers attempt to display whatever is contained within the script element as body text.

To avoid this, many people got into the habit of "commenting out" their scriptsin other words, using comment syntax to prevent the script from being displayed (see Example 3-11).

Example 3-11. Hiding a script with comments
<head>
          <script type="text/javascript">
          <!-- this hides the script from older browsers
           function newWindow() {foodWindow = window.open("images/photo.jpg",
           "foodWin", "width=250,height=188")}
           // End hiding script from old browsers -->
           </script>
</head>

Note the //. This is JavaScript syntax that enables you to write in a comment after that point that won't be displayed, either. The commenting used here will not prevent the script from operating normally in any browser that supports it.

Using the noscript Element

If you'd like to add some text so supporting browsers will display a message regarding script support, you can do so using the noscript element (see Example 3-12).

Example 3-12. Using the noscript element
<head>
           <script type="text/javascript">
           <!-- this hides the script from older browsers
           function newWindow() {foodWindow = window.open("images/photo.jpg",
           "foodWin", "width=250,height=188")}
           // End hiding script from old browsers -->
           </script>

           <noscript>Attention: Your browser does not support JavaScript or you
           have disabled JavaScript.
           </noscript>
</head>

Browsers that support scripting and do not have scripting disabled will not see the contents of the noscript element.

However, those browsers without JavaScript or, as in the case with Figure 3-13, browsers with JavaScript purposely turned off will display the text within the noscript element.

Figure 3-13. The noscript text within a browser with disabled JavaScript.

As you can see, the link is still intact, but the pop-up script will not work if JavaScript is disabled or unavailable.

Finding Scripts Online

One of the great things about JavaScript and DHTML is that so many free scripts are available. Of course, the downside of having so many free scripts available means that many of those scripts might be substandard or that newer, better scripts have come along since. Because of that, use discretion and read the fine print. A few sites that I like include http://javascriptkit.com/, http://simplythebest.net/scripts/DHTML_scripts/, http://www.javascripts.com/, and http://www.dynamicdrive.com/.