Actions

Difference between revisions of "How to determine browser capabilities"

From Joomla! Documentation

(Marked this version for translation)
 
(2 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
<noinclude><languages /></noinclude>
 +
<translate>
 +
<!--T:1-->
 
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.
 
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.
 +
</translate>
  
 +
<translate>
 +
<!--T:2-->
 
The following JavaScript defines a simple browser detection object which determines the browser's name and version by decoding the <code>navigator.userAgent</code> string.
 
The following JavaScript defines a simple browser detection object which determines the browser's name and version by decoding the <code>navigator.userAgent</code> string.
 +
</translate>
  
 
<source lang="javascript">
 
<source lang="javascript">
Line 27: Line 34:
 
</source>
 
</source>
  
 +
<translate>
 +
<!--T:3-->
 
In order to use this in a script, you then create an instance of this object:
 
In order to use this in a script, you then create an instance of this object:
 +
</translate>
  
 
<source lang="javascript">
 
<source lang="javascript">
Line 33: Line 43:
 
</source>
 
</source>
  
 +
<translate>
 +
<!--T:4-->
 
The property <code>browser.name</code> will then give you then name of the browser (MSIE, Opera, Netscape or Firefox), <code>browser.mainVersion</code> will give you the main version number and <code>browser.minorVersion</code> will give you the minor version number.
 
The property <code>browser.name</code> will then give you then name of the browser (MSIE, Opera, Netscape or Firefox), <code>browser.mainVersion</code> will give you the main version number and <code>browser.minorVersion</code> will give you the minor version number.
 +
</translate>
  
 +
<translate>
 +
<!--T:5-->
 
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.
 
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.
 +
</translate>
  
 +
<noinclude>
 +
<translate>
 +
<!--T:6-->
 
[[Category:Tips and tricks]]
 
[[Category:Tips and tricks]]
[[Category:FAQ]][[Category:Component Development]][[Category:JavaScript]]
+
[[Category:FAQ]]
 +
[[Category:Component Development]]
 +
[[Category:JavaScript]]
 +
</translate>
 +
</noinclude>

Latest revision as of 18:45, 17 May 2015

Other languages:
English • ‎français • ‎Nederlands

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 which determines the browser's name and version 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 and 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.