Advanced Detection Techniques | JavaScript: The Complete Reference, Second Edition

There are many more tricks we can use for browser detection. For example, we might be able to calculate relative download speed by delivering a set amount of data to the user and timing the transmission. We might also find it useful to add our own properties to the Navigator object to keep everything neat and organized. Microsoft also has done its part to promote improved browser detection using its client capabilities facility, which is discussed next .

Microsoft Client Capabilities

Microsoft introduced client capabilities detection in Internet Explorer 5 using a default behavior. We ll discuss behaviors in Chapter 21, but for now, take a look at the simple example here; it illustrates Explorer s client capabilities detection, which detects many useful properties, including connection speed.

 <<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">> <<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ie>> <<head>> <<title>>IE Specific Browser Detect<</title>> <<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />> <<style>> <<!-- @media all { IE\:clientCaps {behavior:url(#default#clientCaps)} }  -->> <</style>> <</head>> <<body>> <<ie:clientcaps id="oClientCaps" />> <<script type="text/jscript">> <<!-- document.write("<<h2>>Screen Capabilities<</h2>>"); document.write("Screen Height: "  + oClientCaps.height + "<<br />>"); document.write("Screen Width: "  + oClientCaps.width + "<<br />>"); document.write("Available Height: "  + oClientCaps.availHeight + "<<br />>"); document.write("Available Width: "  + oClientCaps.availWidth + "<<br />>"); document.write("Color Depth: "  + oClientCaps.colorDepth + "bit<<br />>"); document.write("<<h2>>Browser Capabilites<</h2>>"); document.write("Cookies On? "  + oClientCaps.cookieEnabled + "<<br />>"); document.write("Java Enabled? "  + oClientCaps.javaEnabled + "<<br />>"); document.write("<<h2>>System and Connection Characteristics<</h2>>"); document.write("Connection Type: "  + oClientCaps.connectionType + "<<br />>"); document.write("CPU: "  + oClientCaps.cpuClass + "<<br />>"); document.write("Platform: "  + oClientCaps.platform + "<<br />>"); document.write("<<h2>>Language Issues<</h2>>"); document.write("System Language: "  + oClientCaps.systemLanguage + "<<br />>"); document.write("User Language: "  + oClientCaps.userLanguage + "<<br />>"); // -->> <</script>> <</body>> <</html>>

Note	The previous example is very proprietary and the markup will not validate to w3c specification purposefully.

A rendering of this example in Internet Explorer, as shown in Figure 17-2, shows that nearly every bit of information necessary to customize a site for a user is easily found.

Figure 17-2: Explorer s client capabilities in action

While Explorer s client capabilities make life easier, with the proper amount of scripting, we should be able to detect these features under every browser back to Netscape 3 if we make the effort.