Client Capabilities

Web developers are constantly searching for ways to design and implement sites that deliver the best user experience possible. One way to enhance user experience is to customize content based on capabilities that the client browser supports. For example, when a client-side script detects a low-bandwidth modem connection to the server, it may choose to request low-resolution images from the server to minimize bandwidth consumption.

Client capabilities consists of information about the browsing environment, including screen resolution, screen dimensions, color depth, CPU, or connection speed. Microsoft® Internet Explorer 4.0 exposed client capabilities as properties through the Dynamic HTML (DHTML) Object Model. Internet Explorer 5 enhanced this further to include a means to install browser components on demand. Beginning with Internet Explorer 5, all this information has been encapsulated into a DHTML Behavior and will be made available as one of the browser's default behaviors.

By making this information available on the client, pages can be cached, server roundtrips minimized, server resources freed up as content generation shifts back to the client, and overall performance improved.

This article outlines the benefits introduced by a client-side solution and discusses the details involved in obtaining client capabilities information from the client. Realizing that a client-side solution is not suited for every Web site or Web application, a solution for server-side developers is provided as well.

• Benefits of a Client-Side Solution
• Obtaining Client Capabilities
• The Server-Side Approach
• Related Topics

Benefits of a Client-Side Solution

Before the release of Internet Explorer 4.0, the only means of obtaining client capability information was through cookies. Microsoft® Internet Information Server (IIS) provided another mechanism through the Browser Capabilities component. However, there are inherent limitations to these two methods. By exposing client capabilities on the client side, Internet Explorer 4.0 provides a solution that attempts to overcome these limitations.

Using Cookies. The diagram below illustrates what occurs when the user types in the URL of a site that requires client capabilities.

The table below outlines the limitations to the server-side approach using cookies, and explains how these problems are addressed by a client-side solution using client capabilities.

Using the Browser Capabilities Component. The server-side Browser Capabilities component in IIS provides information about the capabilities supported by the browser by comparing the user-agent HTTP Header with the entries in the Browscap.ini file. Server-side scripts are then able to deliver customized content based on this information. However, this approach poses limitations as well. The following table outlines how client capabilities works around these limitations.

Obtaining Client Capabilities

As highlighted in the previous section, the ideal way to obtain client capability information is from a client-side script. This method minimizes server roundtrips, frees up server resources, and, consequently, boosts performance.

Internet Explorer 4.0 introduced this type of information as a set of enhancements to the DHTML Object Model, making it easily accessible to client-side scripts. In most cases, this information has been exposed as properties of the navigator object, which contains information about the browser. In other cases, the information is available as properties of the screen object.

The following table outlines the client capabilities that have been exposed since Internet Explorer 4.0.

Sample Code

The example below downloads the appropriate image based on the number of colors supported by the client screen. If it detects less than 256 colors (or 8 bits per pixel), it displays an image of 16 colors; otherwise, it displays a higher resolution image. As a result, the colors are more suited to the client screen, and overall user experience is improved.

<IMG ID="myImage" WIDTH=200 HEIGHT=200>

<SCRIPT>
{
   if (window.screen.colorDepth >= 8)
      myImage.src = "256color.bmp"
   else
      myImage.src = "16color.bmp";}
</SCRIPT>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

Beginning with Internet Explorer 5, client capabilities information has been made available as one of the browser's default behaviors. Encapsulated in this behavior are all of the properties exposed in Internet Explorer 4.0, and in addition, a set of new properties and methods that enable Web applications to install browser components on demand. For a complete list of properties and methods included in the clientCaps behavior, refer to the clientCaps Behavior reference page.

The following sample demonstrates how to use the clientCaps behavior to obtain some of the available client capabilities information. For more information about behaviors and using behaviors on a page, refer to the links provided in the Related Topics.

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

The Server-Side Approach

Note This requires IIS 5.0, which was still a Beta release at the time of publication. Please refer to the Web Workshop site for the most current information.

Although the benefits are clear, a client-side solution might not be viable for every Web application. In some cases, a Web developer might be locked into a server-side solution, and the disadvantage of using cookies might be negligible. For those cases, Internet Explorer 5 and IIS 5.0 introduce a way to access client capability information from a server-side script, using a combination of cookies and the IIS Browser Capabilities component. Beginning with IIS 5.0, the Browser Capabilities component has been extended to include client capability information as properties of the component.

Because the information is available on the client, accessing the information from a server-side script requires a few more steps.

Implementation Details

Here are the steps required to obtain client capability information from a server-side script.

1. First, create a file that contains the client-side script to retrieve the client capability information on the server's behalf.

   • Cut and paste the following code to your file.

   Note how the property names and their corresponding values are constructed as an ampersand-delimited list of name=value pairs. Persisting information as name=value pairs is characteristic of cookies. (For more information, see the cookie property reference page.)

   • Add as many name=value pairs as the number of client capabilities you need.

   When specifying name=value pairs, the property names specified on the left side of the equal sign do not need to match the names of the actual property in the DHTML Object Model. This specified property name is then used in step 2c below when the property is accessed from the server-side script.

   • The "BrowsCap" cookie is set to the resulting string of all the name=value pairs.
   • Once the cookie is passed back to the server, the Browser Capabilities component parses the string to find the values of individual properties from the cookie. These values are then accessible to the server-side script as properties of the component.

   Sample Code

   <HTML XMLNS:IE>
   <HEAD>
   
   <STYLE>
     IE\:clientCaps {behavior:url(#default#clientCaps)}
   </STYLE>
   
   <SCRIPT>
   function stopAllErrors() 
   {
      // No errors should be presented to the user if they occur.   
     return true;
   }
   
   window.onerror = stopAllErrors; 
   
   function window.onload ()
   {
      bcString  = "width= "          + oClientCaps.width;     
      bcString += "&height="         + oClientCaps.height;
      bcString += "&availHeight="    + oClientCaps.availHeight;
      bcString += "&availWidth="     + oClientCaps.availWidth;
      bcString += "&bufferDepth="    + oClientCaps.bufferDepth;
      bcString += "&colorDepth="     + oClientCaps.colorDepth;
      bcString += "&cookies="        + oClientCaps.cookieEnabled;
      bcString += "&javaapplets="    + oClientCaps.javaEnabled;
      bcString += "&cpuClass="       + oClientCaps.cpuClass;
      bcString += "&platform="       + oClientCaps.platform;
      bcString += "&systemLanguage=" + oClientCaps.systemLanguage;
      bcString += "&userLanguage="   + oClientCaps.userLanguage;
   
      bcString += "&MSvm="           + oClientCaps.isComponentInstalled("08B0E5C0-4FCB-11CF-AAA5-00401C608500","ComponentID");
      bcString += "&MediaPlayer="
               + oClientCaps.isComponentInstalled("{22d6f312-b0f6-11d0-94ab-0080c74c7e95}",
                                      "ComponentID");
   
      document.cookie = "BrowsCap="  + bcString;
   }
   </SCRIPT>
   </HEAD>
   <BODY>
      <IE:clientCaps ID="oClientCaps" />
   </BODY>
   </HTML>
   

2. Create a new Active Server Pages (ASP) file or modify an existing one.
   1. Insert the following <METADATA> tag as the first line in your ASP file. Be sure to set the SRC attribute to the name of the file you just created in step 1. This file contains the client-side script to execute.

   <!--METADATA TYPE="Cookie" NAME="BrowsCap" SRC="InsertNameHere.htm"-->

   2. Create an instance of the Browser Capabilities component.

   There are two ways to do this. One way is to insert this <OBJECT> tag into your page:

   <OBJECT ID=myBrowsCap PROGID="MSWC.BrowserType" RUNAT="Server"></OBJECT>
   

   Another way is to call the CreateObject method of the Server object in ASP, and assign it to the variable myBrowsCap.

   <% Set myBrowsCap = Server.CreateObject("MSWC.BrowserType") %>

   3. Once the Browser Capabilities component is created, all client capability information retrieved from the client-side script above is accessible as properties of the component.

   <%
      Response.write("width= "         +myBrowsCap.width          + "<br>") 
      Response.write("height= "        +myBrowsCap.height         + "<br>") 
      Response.write("availHeight= "   +myBrowsCap.availHeight    + "<br>") 
      Response.write("availWidth= "    +myBrowsCap.availWidth     + "<br>") 
      Response.write("bufferDepth= "   +myBrowsCap.bufferDepth    + "<br>") 
      Response.write("colorDepth= "    +myBrowsCap.colorDepth     + "<br>") 
      Response.write("cookies= "       +myBrowsCap.cookies        + "<br>") 
      Response.write("javaapplets= "   +myBrowsCap.javaapplets    + "<br>") 
      Response.write("cpuClass= "      +myBrowsCap.cpuClass       + "<br>")
      Response.write("platform= "      +myBrowsCap.platform       + "<br>")
      Response.write("systemLanguage= "+myBrowsCap.systemLanguage + "<br>")
      Response.write("userLanguage= "  +myBrowsCap.userLanguage   + "<br>")
   %>
      

Related Topics

• Default Behaviors Reference
• DHTML Behaviors
• Using DHTML Behaviors