Detecting the Browser

Identifying whether the current browser has support for DHTML is extremely important. We wouldn't want visitors on our sites to be put off with a lot of error messages simply because they are using an older browser. This was a common problem with image swapping scripts.

A badly written script wouldn't test to see if the browser would support image swapping, a poorly written script would check to see if the browser being used was NN3 and if so, it allowed the images to be swapped. If the script didn't detect NN3 as the browser, it wouldn't allow the images to be swapped. The problem with this approach is if the browser being used is NN4 or NN5, or another browser with Image object support. A well-written script actually detects support for the Image object directly. The following test is all that's required:

<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.images) {
    // supports the image object
}
else {
    // does not support the image object
}
//-->
</SCRIPT>

This technique can be carried over to version 4 browsers to detect for two new objects: document.all and document.layers. MSIE4 supports the document.all object and NN4 supports the document.layers object. Therefore, the following script will detect version 4 browsers:

<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.all || document.layers) {
    // version 4 or greater browser
}
else {
    // not a version 4 or greater browser
}
//-->
</SCRIPT>

It will be necessary to detect MSIE4 from NN4 as well. Therefore, the following script is sometimes more suitable:

<SCRIPT LANGUAGE="JavaScript">
<!--
if (document.all) {
    // MSIE4+
}
else if (document.layers) {
    // NN4+
}
else {
    // not a version 4 or greater browser
}
//-->
</SCRIPT>

Next: DHTML-related JavaScript Events
Prev: Positioning with DIV, SPAN, LAYER, and ILAYER