How to determine browser capabilities

From Joomla! Documentation

Revision as of 04:02, 5 April 2008 by Sealion (talk | contribs) (A simple browser detection object)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Different web browsers sometimes show differences in the way that they render a page. For this reason you may wish to find out which particular browser a visitor is using, in order to use some browser-specific CSS.

The following javascript defines a simple browser detection object, by decoding the navigator.userAgent string

/************************************/


function browserDetect() {

 var browserNames=new Array("Opera", "MSIE","Netscape","Firefox");
 this.name="NK";
 this.mainVersion="NK";
 this.minorVersion="NK";
 
 for (var i=0; i< browserNames.length; i++)
 {
  var pattern='('+browserNames[i]+')'+'.([0-9]+)\.([0-9]+)';    
  var myRegExp=new RegExp(pattern);
  if (myRegExp.test(navigator.userAgent))
   {
     var results=myRegExp.exec(navigator.userAgent);
     this.name=results[1];
     this.mainVersion=results[2];
     this.minorVersion=results[3];
     break;
   }
 }

}

/*****************************/

In order to use this in a script, you then create an instance of this object:-

var browser = new browserDetect();

The property browser.name will then give you then name of the browser (MSIE, Opera, Netscape or Firefox), browser.mainVersion will give you the main version number, browser.minorVersion will give you the minor version number.

However you should be aware that this is not-foolproof, and it is generally better (in this writer's opinion) to avoid writing browser-specific code as far as possible.