Using Feature Sensing

The best way to determine whether the browser that is running your script has what it takes to do the job is to ask it. Finding out whether the browser has the feature(s) you need to use is a lot simpler than it sounds and requires only one additional line of code.

In most cases, feature sensing is a better alternative than browser sensing (see "Detecting the Browser's Name" in Chapter 13). If the current version of a browser cannot run your script, who's to say that another, more powerful version of the browser won't be released in the future that can run it? Feature sensing will let any able browser that can run the code run it.

In this example (Figures 12.16 and 12.17), I'm checking to see if the browser uses the innerHeight or clientHeight methods to find the height of the viewport in the browser window.

Figure 12.16. This browser, Safari uses the `innerHeight` method, as do all of the Mozilla-based browsers (Firefox, Netscape, and Camino).

Figure 12.17. Internet Explorer uses the `clientHeight` method instead of `innerHeight`.

To sense whether a JavaScript feature is available:

if (window.innerHeight) {. . .}

Within a <script> container, set up a conditional statement, as shown in Code 12.8. Within the parentheses of the if statement, place the JavaScript feature you need to use. In this example, you're checking to see whether the browser can handle the image object.

Code 12.8. This code checks to see whether the `innerHeight` or `clientHeight` methods are used.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Using Feature Sensing</title> <style type="text/css" media="screen"> body {      font: 1em Georgia, "Times New Roman", times, serif;      color: #000;      background-color: #ccc;      margin: 8px; } </style> </head> <body> <script type="text/javascript"> <!-- if (window.innerHeight) {      document.writeln('<h1>I use innerHeight</h1>'); } else if (document.body.clientHeight) {      document.writeln('<h1>I use clientHeight</h1>'); } else { return;} // --> </script> </body></html>

document.writeln('<h1>I use innerHeight</h1>');

Within {} brackets, type the JavaScript code you want to execute if this feature is available on the browser. Keep in mind that to validate in XHTML, JavaScript code that writes out HTML code must be within HTML comments:

<!--. . .//-->

else if (document.body.clientHeight) { document.writeln('<h1>I use clientHeight</h1>'); }

You can include an else statement, specifying the code to be run, in the event that the JavaScript feature for which you're testing is not available.

Figure 12.16. This browser, Safari uses the innerHeight method, as do all of the Mozilla-based browsers (Firefox, Netscape, and Camino).

Figure 12.17. Internet Explorer uses the clientHeight method instead of innerHeight.

Code 12.8. This code checks to see whether the innerHeight or clientHeight methods are used.

Figure 12.16. This browser, Safari uses the `innerHeight` method, as do all of the Mozilla-based browsers (Firefox, Netscape, and Camino).

Figure 12.17. Internet Explorer uses the `clientHeight` method instead of `innerHeight`.

Code 12.8. This code checks to see whether the `innerHeight` or `clientHeight` methods are used.