JavaScript Object Detection - WebReference.com (1/3)

Object Detection in the New Browser Age

Quite often, developers turn to object detection routines to differentiate between browsers. This practice is quite widespread and at least at a conceptual level the adoption of utilizing object detection routines is justified. However, as we shall soon see, the practice of using object detection routines in Web pages can often be undesirable. All too often, the type of object used by the developer and designer doesn’t make a distinction between certain browsers. Therefore, we need to put a little more thought into object detection routines, so that they can better make that all important distinction between browsers.

Object detection is the practice of finding an object that is supported by a specific browser and then using that object to form the basis of a conditional statement. For example, if we wanted to code only for Internet Explorer we could use the document.all collection to separate Internet Explorer from other browsers.

if (document.all) { // do something funky here }

One of the advantages of object detection is that we surpass the hurdle of a browser hiding their identity completely, which can make the detection of user agent strings problematic.

Despite the obvious advantages of object detection, Web developers and designers alike all too frequently make the mistake of not correctly separating browsers through their object detection routines.

For example consider the following simple function:

function whatBrowser() { if (document.all) { alert('just a test') } }

The alert will trigger correctly in Internet Explorer 4 and above as we would expect. However, the alert will also trigger in Opera based browsers because Opera also supports the document.all collection. Clearly, this is often undesirable as we may be using code specific Internet Explorer features that are not supported in Opera; the consequence of which often results in a badly broken page in Opera.

To complicate matters, the problem isn’t just specific to Opera and Internet Explorer based browsers. For example, consider the following scenarios:

A developer finds a problem on Internet Explorer 5 for Windows, but the problem doesn’t exist on Internet Explorer 5.5+, Internet Explorer 6 and Internet Explorer 5 on Mac. The developer then needs to find an object that is specific to Internet Explorer 5 which doesn’t allow other browsers to use the code in the conditional statement.

A developer decides to use standards based coding, but finds that the appearance of their Web page is dissimilar between Internet Explorer 6 and Netscape 7.

A developer utilizes some Internet Explorer 5.0+ features but notices that Mac IE5 differs considerably from windows IE5.