Chapter 17: Browser and Capabilities Detection

Given the wide variety of browsers that can hit a public Web site, it would be useful to build pages to suit each user s specific browsing environment. Under most versions of JavaScript, it is possible to detect the user s browser type and version, as well as numerous other client-side characteristics, such as screen size , color depth, and support for Java and plug-ins. Once the characteristics of the user s browser have been detected , it is often possible to improve the user s experience by writing specialized content or redirecting them to other locations automatically. However, browser detection has its issues and often it is better to focus on capabilities detection. In the case of JavaScript, we focus on object detection. Together these approaches are useful for developers looking to safely add advanced features to their sites. Unfortunately, these techniques, when misused, can lend themselves to the creation of exclusionary Web sites. Browser detection and control techniques should instead be used to improve the use of Web sites for all users, rather than a select few.

Browser Detection Basics

Anyone who has built more than a few Web pages has surely come across some of the numerous differences between browser types and versions. A page that looks perfect on your screen just doesn t look quite the same on your friend s or neighbor s, and sometimes it looks vastly different. The variances range from minor cosmetic inconsistencies, like a small shift of content or container size, to catastrophic situations in which the page causes errors or doesn t render at all.

What s a developer to do when faced with such an unpredictable medium as the Web? Some throw up their hands and just build their site to suit their current browser of choice. If you ve ever noticed statements on sites like This site best viewed in , then you have encountered this approach already. Others simplify their site technology to the so-called lowest common denominator. This is the approach typically used by the largest of sites, which seem ever focused on continuing to meet the needs of older browsers, often lacking support for even CSS or JavaScript, viewing pages in a low-resolution environment. Falling somewhere in between these extremes is the more adaptive type of site that modifies itself to suit the browser s needs or indicates to the user their inability to use the site. This sense and adapt concept is often termed browser detection or browser sniffing and is an integral part of JavaScript tasks of any complexity.