Creating Cross Browser Content | Dynamic HTML in Action

Cross browser content is a loose concept. It does not mean that a particular Web page will work for every browser. Cross browser content almost always boils down to a page working well for a fairly wide audience using a variety of browsers. There are several ways to make content that works for the widest possible audience. These include using the following.

Commonly supported features

"Gracefully degrading" features

Browser detection, and then using only features supported by the current browser

We'll take a look at each of these techniques next.

Using Commonly Supported Features

Technically, the only way to create complete cross browser content is to use only features supported by all browsers. Unfortunately, this option won't fly with most artists or designers, as it doesn't allow for such basic features as using images or changing fonts. However, it is possible to reach upwards of 99.9 percent of your audience if you stick with the basics. Even if you plan on using more advanced features, it is often possible to find some crossover in the support of more advanced features among different browsers.

Sticking with the Basics

Capabilities supported by virtually all clients include GIF images (JPG images are almost as widely supported), hyperlinks with the <A> tag, and very basic HTML, like <P>, <B>, <I>, <TITLE>, <OL>, <LI>, etc. You can find out more about early versions of the HTML standard from the W3C Web site at www.w3.org/MarkUp/.

Almost as large an audience can be reached by conforming to the HTML 3.2 standards, which are well supported in version 3+ browsers. Following these standards gives support for almost all of the commonly used tags. The HTML 3.2 specification is a fairly short document and is recommended reading. It can be found at the W3C Web site specified above.

If you just write a Web page, it is difficult to tell if you have conformed to a particular specification. To meet this need, a class of programs called validators has been created. A validator will read through a document and check it against a set of rules to make sure it conforms. Many good validators are available that can check documents against the HTML 3.2 standard. The HomeSite Web page editor (available from Allaire at www.allaire.com) includes a good validator that has been integrated into the editor itself. Being able to validate code while writing it is very valuable. The W3C provides a validation service at validator.w3.org. Additional validators include HTML Check (available from www.netmechanic.com) and Weblint (available from www.cre.canon.co.uk/~neilb/weblint/).

Varied Support

Some of the more advanced features are supported in different ways in different browsers. Prime examples of this are the forms and elements found in forms. For example, Internet Explorer allows <INPUT>, <TEXTAREA>, and <SELECT> tags to be used anywhere in a document, while Netscape Navigator requires that they be contained in a FORM element. Also, Internet Explorer supports the <BUTTON> tag, which is not supported in current versions of Navigator. Most Web crawlers do not support submitting data from forms at all. Scripting support also differs widely among different browsers and browser versions, as demonstrated in Code Listing 23-1. The results are displayed in Figure 23-1.

Code Listing 23-1.

 <HTML> <HEAD> <TITLE>Listing 23-1</TITLE> <SCRIPT LANGUAGE="JavaScript"> function getValIE4(){ alert(F1.S1.value) } function getValMore(){   alert(document.F1.S1.options[document.F1.S1.selectedIndex].value) } function getValMost(){   oSelect=document.F1.S1   // Iterate through all of the OPTIONS in the SELECT   for (var i=0;i<oSelect.options.length;i++) {     // If this one is selected, get its value     if (oSelect.options[i].selected==true){sVal=oSelect.options[i].value}   }   alert(sVal) } </SCRIPT> </HEAD> <BODY> <HR> <FORM NAME="F1"> <SELECT NAME="S1">   <OPTION VALUE="1st Item">First Item   <OPTION VALUE="2nd Item">Second Item   <OPTION VALUE="3rd Item">Third Item </SELECT> <P>Click a button to display an alert box with the item chosen above<P>  <INPUT TYPE="BUTTON" onclick="getValIE4()" VALUE="IE4+ only"><BR> <INPUT TYPE="BUTTON" onclick="getValMore()" VALUE="NS3+ and IE4+"><BR> <INPUT TYPE="BUTTON" onclick="getValMost()" VALUE="NS3+ and IE3+"><BR> </FORM> </BODY> </HTML>

click to view at full size.

Figure 23-1. Each of the buttons uses a different function to display the value of the selected item.

As you can see in Figure 23-1, this example displays a Select box and several buttons. Clicking a button will display an Alert dialog box that contains the value currently selected in the Select box. Notice that three different functions are used by the different buttons in Code Listing 23-1. These three functions demonstrate how support for scripting forms has changed as browsers have become more advanced.

getValIE4 The easiest to understand of these functions is getValIE4. This function uses the code F1.S1.value to refer to the value of the Select box named S1 in the form named F1. This function is intuitive and easy to use. Unfortunately, it is supported only in versions 4 and later of Internet Explorer. In other browsers and in earlier versions of Internet Explorer, this function results in an error.

getValMore The second function, getValMore, is supported in more browsers, namely Netscape Navigator 4 and later and Internet Explorer 4 and later. This function does several things differently than getValIE4. First of all, Navigator requires that the document object be used when referring to a form. Therefore, document.F1 is used to refer to our form rather than simply F1. The options collection is present on all SELECT elements and simply contains a list of all of the <OPTION> tags that the SELECT element contains. The selectedIndex property of the SELECT element contains the (zero-based) number of the selected OPTION. Thus, document.F1.S1.selectedIndex gets the number of the selected item. We can use it in combination with the options collection to get the value of the selected item in the options collection, as demonstrated in the following code.

 document.F1.S1.options[document.F1.S1.selectedIndex].value

Unfortunately, Internet Explorer 3 does not support the value attribute when an option is referred to in this way, and so this function will result in an error.

getValMost Finally, the third function, getValMost, uses only features that are supported in versions 3 and later of both browsers. Both browsers support a property on OPTION elements named selected, which has a value of true when the item is selected and false when the item is not. The getValMost function loops through all of the members of the options collection and tests whether the selected property has a value of true. If it does, the value of that option is recorded in the sVal variable. After checking all the options, the value of the sVal variable is displayed in an Alert dialog. All of these features are supported in our target browsers (versions 3 and later of Internet Explorer and Netscape Navigator), and this function is successful, though cumbersome.

This example illustrates the importance of testing programs in all target browsers. It also illustrates the importance of restricting the number of browsers you support so that you can get to know their features and limitations.

NOTE
In Code Listing 23-1, if we were using a SELECT element that allowed multiple options to be selected, we would want to modify the functions slightly so that they displayed all the selected items. For example, in the third function we would want to append each selected value to sVal rather than replacing the current sVal.

Gracefully Degrading Pages

Pages containing advanced features that can still be used by browsers that do not support these features can be described as gracefully degrading. For example, CSS technology degrades fairly gracefully; a page that uses standard HTML 3.2 with the addition of CSS will display the styles in Navigator 4, but will simply look as though no CSS had been specified when viewed in Navigator 3. Behaviors are another gracefully degrading technology. Browsers that do not support behaviors ignore behavior code, while browsers that do support behaviors, such as Internet Explorer 5, display them.

The standard rule when using any feature that is not supported in all of your target browsers is to make sure that your site does not depend on that feature for key functionality. For example, if you want to target users of text-only browsers, you should not rely on a Macromedia Flash file (graphic only) for navigation. You should not use a Dynamic HTML expanding menu for navigation without putting careful thought into how it will behave in browsers that do not support DHTML. As a general rule, you should not use any functionality unless it is supported by all of your target browsers or it provides a substantial benefit.

Typically, features that do not degrade well are fairly easy to identify. Simply opening the file in the oldest versions of the browsers you want to support will usually show you any problems.

You can also take advantage of the fact that some features are not supported in some browsers. For example, the <COMMENT> tag (part of the HTML 4.0 specification) can be used like  to prevent text from displaying. However, it is not supported in Netscape Navigator through version 4 or Internet Explorer prior to version 3. Thus, the following code will cause a warning to appear only in those browsers that do not support this tag.

 <COMMENT> This page is designed for a browser that supports HTML 4.0.  Please upgrade if possible. </COMMENT>

Browser Detection

Browser detection (also known as browser sniffing) is simply proactively determining which browser a client is using. A page can contain code that determines the browser being used and changes the content of the page so that only appropriate features are used.

There are two major ways to perform browser sniffs. You can get information about the browser directly from the navigator object. In this way, for example, you could tell precisely which fractional version of Netscape 4 (4.05, 4.06, and so on) is being used. Alternatively, you can test for functionality specific to the target browser. For example, if the client's browser has a layers object, it must be Netscape 4 or later.

Using the navigator Object

The navigator object contains a lot of useful information about the browser being used. Code Listing 23-2 demonstrates some of the properties of the navigator object. Figure 23-2 shows this page displayed in Internet Explorer 5, while Figure 23-3 shows the results in Netscape Navigator 4.08.

Code Listing 23-2.

 <HTML> <HEAD> <TITLE>Listing 23-2</TITLE> </HEAD> <BODY> <H2>Information about the <I>navigator</I> object in this browser.</H2> <SCRIPT LANGUAGE="JavaScript"> document.write("<BR><B>userAgent</B>="+navigator.userAgent) document.write("<BR><B>appMinorVersion</B>="+navigator.appMinorVersion) document.write("<BR><B>appVersion</B>="+navigator.appVersion) document.write("<BR><B>appName</B>="+navigator.appName) document.write("<BR><B>appCodeName</B>="+navigator.appCodeName) document.write("<BR><B>browserLanguage</B>="+navigator.browserLanguage) document.write("<BR><B>cookieEnabled</B>="+navigator.cookieEnabled) document.write("<BR><B>cpuClass</B>="+navigator.cpuClass) document.write("<BR><B>onLine</B>="+navigator.onLine) document.write("<BR><B>platform</B>="+navigator.platform) document.write("<BR><B>systemLanguage</B>="+navigator.systemLanguage) document.write("<BR><B>userLanguage</B>="+navigator.userLanguage) </SCRIPT> </BODY> </HTML>

click to view at full size.

Figure 23-2. Some of the properties of the navigator object in Internet Explorer 5.

click to view at full size.

Figure 23-3. The same page in Netscape Navigator 4.08.

The navigator object has a number of useful properties. Each contains some information about the browser being used. The most useful properties are appVersion and userAgent, which give information about the browser, the version, and the operating system all in one place. Table 23-2 shows the values for the appVersion property in a variety of situations.

The number at the beginning of the appVersion property specifies to which version of Netscape Navigator the browser is designed to be similar. The information in parentheses usually describes the user's browser (if not Navigator) and operating system. The latest version of Navigator available when Internet Explorer 5 was released was version 4; therefore Internet Explorer 5 reports an appVersion of 4.0. All versions of Internet Explorer include the characters MSIE in the appVersion property, followed by the version. The userAgent property contains similar information. Script can examine the contents of this property to determine exactly which browser is running, and then act accordingly. For example, Code Listing 23-3 tests the browser and version and writes a style sheet based on the browser being used. Figure 23-4 displays the results.

Code Listing 23-3.

 <HTML> <HEAD> <TITLE>Listing 23-3</TITLE> <SCRIPT LANGUAGE="JavaScript"> av=navigator.appVersion // Check if IE and if so, check version iMSIE=parseInt(av.indexOf("MSIE")) if (iMSIE>=1){   // Get major version and write appropriate style   iVer=parseInt(av.charAt(iMSIE+5))   if (iVer==3){ sStyle = "color:blue;font:italic" }   if (iVer==4){ sStyle = "color:blue;" }    if (iVer>=5){ sStyle = "color:blue;font:bold" }   document.write("<STYLE>body{"+ sStyle +"}</STYLE>") }   // If not IE, check if it's Netscape, if so, check version else {   if (navigator.appName=="Netscape"){     if (parseInt(av) >= 4){       document.write("<STYLE>body{color:red;}</STYLE>")}   } } </SCRIPT> </HEAD> <BODY> This page senses the browser and uses a different style sheet for each. <HR> The page will be blue in Internet Explorer. In version 3 the text will be italicized, in version 4 it will be normal, and in version 5 and later it will be bold. <HR> In version 4 and later of Netscape Navigator the text is red. Prior  versions do not use style sheets and display the page as standard text. </BODY> </HTML>

click to view at full size.

Figure 23-4. This page writes a different style sheet in each browser.

Table 23-2 appVersion Property Values

Browser	Operating System	appVersion String
Internet Explorer 3.02	Windows 95	2.0 (compatible; MSIE 3.02; Windows 95)
Internet Explorer 4.01	Windows 95	4.0 (compatible; MSIE 4.01; Windows 95)
Internet Explorer 4.01	Windows NT	4.0 (compatible; MSIE 4.01; Windows NT)
Internet Explorer 5 Beta 2	Windows 98	4.0 (compatible; MSIE 5.0b2; Windows 98)
Internet Explorer 5	Windows 98	4.0 (compatible; MSIE 5.0; Windows 98)
Netscape Navigator Gold	Macintosh System 7.5	3.02Gold (Macintosh; I; 68K)
Netscape Navigator 3.04	Windows 95	3.04 (Win95; I)
Netscape Navigator 3.04	Windows 98	3.04 (Win95; I)
Netscape Navigator 4.08	Windows 95	4.08 [en] (Win95; I; Nav)
Netscape Navigator 4.08	Windows 98	4.08 [en] (Win98; I; Nav)
Netscape Navigator 4.08	Windows NT	4.08 [en] (WinNT; I; Nav)

First the indexOf method is used to determine where in the appVersion property the string MSIE is found. If it appears at all, it means that the browser is some version of Internet Explorer. The code then retrieves the major browser version, which is the number that appears after the text MSIE. Note that the code is "forward-compatible"; if the version number is greater than 5, it is treated as 5.

If the string MSIE is not found, indexOf("MSIE") will return −1 and the code will enter the else block. At this point, we check to see whether the browser is Netscape Navigator by checking the appName property of the navigator object. If so, we use parseInt (see Chapter 8 for more information) to convert the appVersion property to a major version number, which we then test. If the browser is not Internet Explorer or Netscape Navigator, the if and else blocks will not be run and no style sheet will be written.

To make sniffing browsers easier, the following script file can be found on the companion CD as chap23\ sniffer.js. The sniffer.js file is a generic browser sniffer that uses Boolean variables to hold information about the browser being used. You can either copy the text of the file for your own Web pages or include it as a .js file (covered in Chapter 6).

 <SCRIPT LANGUAGE="JavaScript"> <!-- // This script checks browser being used and its version var bIE=false, bIE5=false, bIE5=false, bIE4=false, bIE3=false, bIE2=false var bNS=false, bNS4=false, bNS3=false, bNS2=false av=navigator.appVersion; // Check if Internet Explorer and if so, check version iMSIE=parseInt( av.indexOf("MSIE") ) if ( iMSIE >= 1 ){   bIE = true;   if ( parseInt( av.charAt(iMSIE + 5) ) == 3 ){ bIE3=true }   else if ( parseInt( av.charAt(iMSIE + 5) ) == 4 ){ bIE4 = true }   else if ( parseInt( av.charAt(iMSIE + 5) ) >= 5 ){ bIE5 = true } }   // If not Internet Explorer, check if it's Netscape, if so, check version else {   if ( navigator.appName == "Netscape" ){     bNS = true;     if (parseInt(av) >= 4){ bNS4 = true }     else if ( parseInt(av) >= 3 ){ bNS3 = true }     else { bNS2 = true }   } } //--> </SCRIPT>

There are more full-featured sniffers available on the Web that provide more detailed information than our basic version, including fractional versions and operating system information. Good references can be found at developer.netscape.com/docs/examples/javascript/browser_type.html and on the SBN Workshop Web site. On the companion CD, go to Workshop (References); Web Content Management; Sniffing for Browser, VM, & OS. To get to the online version, visit the MSDN Online Resource page at msdn.microsoft.com/resources/schurmandhtml.htm, or open the file named MSDN_OL.htm on the companion CD, and choose Browser Detection.

Detecting Browser Functionality

It is frequently useful to test the capabilities of a browser rather than the exact browser version. After all, the browser version does not matter as much as whether the browser can perform a certain function. For example, the only browsers that currently support the document.all collection are Internet Explorer versions 4 and later. Some useful objects that can be tested include

document.all	Internet Explorer 4 and later
window.Event	Netscape Navigator 4 and later (The Internet Explorer version is window.event.)
document.images	Internet Explorer 4 and later and Netscape Navigator 3 and later
document.layers	Netscape Navigator 4 and later

Code Listing 23-4 sets a variable named bImg to true if the browser has an images collection. When a user moves the mouse over the image on a page, an event handler tests whether bImg is true; if so, it changes the image. In this case, we do not care what the browser is, as long as it supports the images collection. The file IENSSwap.htm in the crossplat folder on the CD contains an expanded version of this file that can be used for generic image-swapping tasks.

Code Listing 23-4.

 <HTML> <HEAD> <TITLE>Listing 23-4</TITLE> <SCRIPT LANGUAGE="JavaScript"> if (document.images) { var bImg=true } </SCRIPT> </HEAD> <BODY> <BODY> <A HREF="http://www.microsoft.com"   onmouseover="if (bImg){document[`Img1'].src=`2.gif'}"   onmouseout="if (bImg){document[`Img1'].src=`1.gif'}" ><IMG NAME="Img1" SRC="1.gif" BORDER="0"></A> </BODY> </HTML>

Conditional Comments

Conditional comments are a new feature in Internet Explorer 5. This feature is essentially a new type of comment that lets you selectively comment out content based on whether Internet Explorer 5 is running. Conditional comments are inherent in the browser and do not require that a script engine load, meaning that the page as a whole will load faster. They are demonstrated in the following example:

 <!--[if IE 5]> This text displays in Internet Explorer 5. Other browsers do not  display it because it is in a traditional comment tag. <![endif]--> <![if ! IE 5]> This text is not in a traditional comment tag and so is displayed, except in Internet Explorer 5. <![endif]>

Note that the first block of code is in a traditional comment tag (shown in bold).

This block will not display in most browsers. Internet Explorer 5 looks inside the comment tag and sees the [if IE 5] test. It then displays the content because it is Internet Explorer 5. The subsequent block of text is not in a traditional comment tag, and so it does display in normal browsers. Internet Explorer 5 sees the test [if ! IE 5], fails it, and so does not display the text.

As of this writing, conditional comments are at a very basic stage of development. They let you determine only whether Internet Explorer 5 is the active browser. This feature might become more powerful later.

Conditional Compilation

Conditional compilation is a technology new to Internet Explorer 4. It allows easy testing of a number of environmental properties, including the client operating system and the type of CPU. Table 23-3 lists the variables it supports.

Table 23-3 Variables Supported by Conditional Compilation

Variable	Description
@_win32	true if using a Win32-based operating system (Windows 95 or later, Windows NT, or Windows 2000 or later)
@_win16	true if using a Win16-based operating system (Windows 3.x)
@_mac	true if using an Apple Macintosh operating system
@_x86	true if using an Intel compatible processor (486, Pentium, Pentium II, and so on)
@_alpha	true if using an Alpha processor
@_mc680x0	true if using a Motorola 680x0 processor (found in older Macintosh compatibles)
@_PowerPC	true if using a PowerPC processor (found in newer Macintosh compatibles)
@_jscript	Always returns true
@_jscript_build	Holds the JScript scripting engine build number
@_jscript_version	Holds the complete version number of the JScript engine

Conditional compilation is first turned on with the @cc_on statement. Once it is active, the conditional statements @if, @elif, @else, and @end can be used together to test the state of the variables listed above. The @set statement can be used create your own variables, for example @set @var1 = 12345. Placing the conditional compilation code in JavaScript comments (these begin with /* and end with */) ensures that it does not cause problems in browsers that do not support it. Code Listing 23-5 demonstrates a basic use of conditional compilation.

Code Listing 23-5.

 <HTML> <HEAD> <TITLE>Listing 23-5</TITLE> <SCRIPT LANGUAGE="JavaScript"> /*@cc_on @*/ /*@if (@_win16)     alert("You should consider upgrading your operating system.");   @elif (@_mac)     alert("You are using a Macintosh.");   @elif (@_win32)     alert("You are using a Win32 based operating system.");   @else @*/     alert("Not using Internet Explorer on a Macintosh or on Windows."); /*@end @*/ </SCRIPT> </HEAD> </HTML>

Client Capabilities

Client capabilities are a default behavior included with Internet Explorer 5 that can be used to give extensive information about the user's system. Some of the available information includes the height, width, and color depth of the user's display; the type of processor, operating system, and net connection being used; whether cookies are enabled; whether Java is available, as well as the version of Java installed; and the language being used. This behavior also provides a number of methods. These include mechanisms for component management, such as checking whether a component is installed, installing a component, comparing version numbers, and several more. There are many ways the client capabilities behavior can be implemented. See the SBN Workshop Web site or the CD that accompanies this book. On the CD, choose DHTML, HTML & CSS; DHTML Behaviors; Default Behaviors Reference, and click the Behaviors bullet point in the right frame. To get to the online version, visit the MSDN Online Resource page at msdn.microsoft.com/resources/schurmandhtml.htm, or open the file named MSDN_OL.htm on the companion CD, and choose Client Capabilities. Code Listing 23-6 demonstrates retrieving the values of the client capabilities properties. Figure 23-5 displays the results.

Code Listing 23-6.

 <HTML> <HEAD> <TITLE>Listing 23-6</TITLE> </HEAD> <BODY> <IE:clientCaps ID="oClientCaps" /> Client Capabilities properties on this system. <PRE> <SCRIPT LANGUAGE="JavaScript"> oClientCaps.style.behavior = "url(#default#clientCaps)"; document.writeln("width          = "+oClientCaps.width) document.writeln("height         = "+oClientCaps.height) document.writeln("availHeight    = "+oClientCaps.availHeight) document.writeln("availWidth     = "+oClientCaps.availWidth) document.writeln("bufferDepth    = "+oClientCaps.bufferDepth) document.writeln("colorDepth     = "+oClientCaps.colorDepth) document.writeln("connectionType = "+oClientCaps.connectionType) document.writeln("platform       = "+oClientCaps.platform) document.writeln("cpuClass       = "+oClientCaps.cpuClass) document.writeln("cookieEnabled  = "+oClientCaps.cookieEnabled) document.writeln("javaEnabled    = "+oClientCaps.javaEnabled) document.writeln("systemLanguage = "+oClientCaps.systemLanguage) document.writeln("userLanguage   = "+oClientCaps.userLanguage) </SCRIPT> </PRE> </BODY> </HTML>

click to view at full size.

Figure 23-5. This page displays a number of different system settings.