WP-Mix

How to detect each of the major browsers (Chrome, IE, Firefox, Opera, Safari) client-side via JavaScript.

Disclaimer

Note that this technique employs user-agent sniffing via JavaScript. User-agent sniffing is not as reliable as feature detection, so make sure to read up and make the best decision before using this technique.

Detect major browsers with JavaScript

Here is a JavaScript snippet to detect each of the major browsers, Chrome, IE, Firefox, Opera, and Safari.

var chrome   = navigator.userAgent.indexOf('Chrome') > -1;
var explorer = navigator.userAgent.indexOf('MSIE') > -1;
var firefox  = navigator.userAgent.indexOf('Firefox') > -1;
var safari   = navigator.userAgent.indexOf("Safari") > -1;
var camino   = navigator.userAgent.indexOf("Camino") > -1;
var opera    = navigator.userAgent.toLowerCase().indexOf("op") > -1;
if ((chrome) && (safari)) safari = false;
if ((chrome) && (opera)) chrome = false;

That provides a set of variables that we can use to conditionally check for specific browsers and apply any desired code, for example:

if (explorer) alert('Internet Explorer');

Repeat: use this technique with caution, browsers are constantly changing their reported user agents for no apparent reason whatsoever. Even so, browser detection remains a useful technique for those one-off cases where including an entire feature-detection library would be overkill.