Für Designs von Webseiten, die unter allen modernen Browsern gleich aussehen sollen, ist es des öfteren notwendig die Darstellungsunterschiede der einzelnen Browser durch unterschiedliche Stylesheet-Vorlagen auszugleichen.
Dazu kann die folgende Funktion zur Browsererkennung verwendet werden:
<script language="javascript" type="text/javascript">
// globale Browser/OS Variablen definieren
_DOM=false; _All=false; _NS4=false; _NS6=false; _NS7=false; _OP=false; _IE4=false; _IE5=false; _IE6=false; _OtherBrowser=false; _Mac=false; _Win=false; _OS2=false;
// Browser/OS Variablen setzen
function CheckBrowser(){
var navAgent=navigator.userAgent.toLowerCase();
var appVer=navigator.appVersion.toLowerCase();
var versMinor=parseFloat(appVer);
var versMajor=parseInt(versMinor);
_Mac=(navAgent.indexOf("mac")!=-1);
_Win=((navAgent.indexOf("win")!=-1)||(navAgent.indexOf("16bit")!=-1));
_OS2=(navigator.platform=="OS/2")?true:false;
_All=(document.all)?true:false;
_DOM=(document.getElementById)?true:false;
_OP=(window.opera)?true:false;
_SAFARI=(navAgent.indexOf('safari')!=-1)?true:false;
var iePos=appVer.indexOf('msie');
if (iePos!=-1){
versMinor=parseFloat(appVer.substring(iePos+5,appVer.indexOf(';',iePos)));
versMajor=parseInt(versMinor);}
nav6Pos=navAgent.indexOf('netscape6');
nav7Pos=navAgent.indexOf('netscape/7');
if (nav6Pos!=-1){
versMinor=parseFloat(navAgent.substring(nav6Pos+10));
versMajor=parseInt(versMinor); }
var netsc=((navAgent.indexOf('mozilla')!=-1) && (navAgent.indexOf('spoofer')==-1) && (navAgent.indexOf('compatible') == -1)
&& (navAgent.indexOf('opera')==-1) && (navAgent.indexOf('webtv')==-1));
_NS4=(document.layers)?true:false;
_NS6=(netsc&&versMajor==6);
_NS7=(netsc);
var msie=(iePos!=-1);
_IE4=(msie&&versMajor==4);
_IE5=(msie&&versMajor==5);
_IE6=(msie&&versMajor==6);
_OtherBrowser=(!_NS4&&!_NS6&&!_OP&&!_IE4&&!_IE5&&!_IE6);
}
</script>
Ein Anwendungsbeispiel könnte so aussehen:
<script language="javascript" type="text/javascript">
CheckBrowser();
if(_NS7 || _NS6) document.write('<link rel="stylesheet" href="../css/styleNS6.css" type="text/css">');
if(_IE5) document.write('<link rel="stylesheet" href="../css/styleIE5.css" type="text/css">');
if(_SAFARI) document.write('<link rel="stylesheet" href="../css/StyleSAFARI.css" type="text/css">');
</script>