Three browser detection methods: navigator, family, features

In theory a different page might be written for each browser. In practice this might be reduced to just two versions, one for W3C-conformant level 5/6 browsers such as IE 5+ and NS6 and the other for older level 3/4 browsers such as IE 4 and NS 4. Some Netscape users are still loyal to version 4 and even version 3, but Microsoft's upgrading routines have pushed users to levels 5 and 6, especially the large number of post-Y2K PC buyers who acquired machines with IE5 already on them (and then XP machines with IE6).

1. Navigator method:

OUTPUT:

CODE:
document.write('Browser Type: '+navigator.appName' ');
document.write('Browser Family and Version: '+navigator.appVersion+' ');

NOTES:
Navigator type alone can't separate incompatible NS 4 from NS 6
Navigator + version can separate NS4 from NS6 but browser upgrades quickly make this code obsolete

2. Family method:

OUTPUT

CODE:
	if (navigator.family = "ie4")
	document.write("The browser is IE4 or 5 or 6"); 
	else

	{if (navigator.family = "nn4" )
	document.write("The browser is NS4"); 
	else
	{if (navigator.family = "gecko")
	{document.write("The browser is NS6")
	}}}

NOTES:
can detect browser by family
This code can distinguish NS4 ("nn4") from NS6 ("gecko") but it can't separate IE 4 from IE 5 or IE 6 (all IE 4 family)

3. Features method: (with POPUP)


THE CODE:
function showit()
{if (document.getElementById)
alert("You have a W3C standard browser \n ... probably as IE5+ or NS6+")
else
{if (document.layers)
alert("You have a non-W3C browser \n ... probably Netscape 4 ")
else
{if (document.all)
alert("You have a non-W3C browser \n ... probably Internet Explorer 4+")
else
{alert("You have a non-W3C browser \n ... unknown to this detection method")
}}}
}
...
<BUTTON onClick="showit()">Show browser</BUTTON>

NOTES:
This code distinguishes three levels: 1) IE 5/6 or NS6 (getElementById)-- 2) NS4 (layers) -- 3) IE 4 (all)
The advantage is that hard to detect browsers such as Opera, AOL, WebTV, etc. are classified by functionality without regard to name.

4. Browser sniffer/redirect by features -- code only

CODE:
if (document.getElementById)
document.location="index818.html" // latest IE5+/NS6 browser
else
{if (document.layers)
document.location="index515.html" //Netscape 4x
else
{if (document.all)
document.location="index515.html" //IE  4
else
{document.location="index515.html" // all other browsers
}}}

NOTES:
Similar to previous routine, but "document.location" redirects browser to new URL -- deactivated here to stay on the page
The compromise here is that W3C-standard browsers are redirected to one advanced page and all older browsers to the same older standard page.