How to Determine the Browser Type and Version

Often you will want to send content to the client only if you know their browser can support it. You may already have created pages that are designed to work only in IE and Netscape, version 4 or greater.  Or for example you may have situations where a specific browser type and or version creates a page layout problem.  In this lesson we present the technique used to detect specific browsers that you want to handle things differently for.

For starters, assume you receive complaints that your favorite shade of blue used for some font text on your page is extremely difficult to read when viewed on WebTV (colors are typically an issue with WebTV due to contrast and other problems).   What are you do to - remove the blue color all together?  Change it for a boring share of grey? Of course not!

The trick here is first finding a alternative color suitable for viewing on WebTV, and only using that color when the visitor is using a WebTV browser.   Otherwise you use your blue font as originally planned.  Here's how you would implement that:

This technique of testing for a specific browser type is also useful if you have specific tags and scripts that only work with certain browsers.  For example, say you had certain pages that required Netscape or IE versions 4 or higher. Instead of going through and conditionally including all the v4-only tags, scripts and objects, this example will show how to use this technique to detect when a browser is not Netscape or IE v4 or higher, and redirect the user to an alternate page suitable for the other browsers.

Remember that the response.redirect code should go before any of the HTML content on the page. You can keep this check script in a separate file, and include it at the top of all pages within an application.

Another example is the title attribute for HTML elements which, currently, is only supported by IE 4 or greater. While the title attribute degrades fine in other browsers, it is sometimes desirable to limit the amount of superfluous code being sent to the browser... regardless of how insignificant it may seem. This example will show you a quick and easy way to let BrowserHawk decide for you whether or not to use that title attribute.

Here is an example of the title attribute. Since you are using IE4 or greater, if you hold your mouse over the following link for a few seconds, you will see a tooltip, similar to the kind you see when you hold your mouse over a button on an application's toolbar. This allows you to include a lot more information in a small space, such as a navigation frame or a slim table cell.

Using two methods of BrowserHawk, we can quickly and easily check if the visitor is using a browser which supports the title element (namely, that it is Internet Explorer AND that it is version 4 or greater). Here is what the code looks like:

This logic could be used for any feature that you know is only supported by certain browser versions. Sometimes it is worth it to prevent the waste of bandwidth caused by adding elements and features to a page when they can't be viewed anyway. But more likely then not, you'll use this approach to avoid inconsistencies with layout and scripting across browsers.