Browser detection script

Browser Detection Script

If you are using CSS to control the layout of your web pages you may need to use a script to feed different CSS stylesheets to different browsers.

Here is some sample code you can use to detect a visitor's browser and serve them the correct style sheet. You need to copy the following line into the HEAD section of your web pages:

and then save the following as a file called detect.js and place it in the same directory as your web pages.

var browser_used=navigator.userAgent.toLowerCase();

var is_major = parseInt(navigator.appVersion); 
var is_minor = parseFloat(navigator.appVersion);

var is_ie   = (browser_used.indexOf("msie") != -1); 
var is_mac    = (browser_used.indexOf("mac")!=-1);

var is_ie5  = (is_ie && (is_major == 4) && (browser_used.indexOf("msie 5.0")!=-1) );

var is_nav  = ((browser_used.indexOf('mozilla')!=-1) && (browser_used.indexOf('spoofer')==-1) 
                && (browser_used.indexOf('compatible') == -1) && (browser_used.indexOf('opera')==-1) 
                && (browser_used.indexOf('webtv')==-1));

if (is_mac)
        {
                // detect if ie5
                
                if(is_ie5)
                {                
                        document.write("<LINK REL=stylesheet HREF='ie5mac.css' TYPE='text/css'>");                 
                }
                else
                {
                        // if not load mac
                        document.write("<LINK REL=stylesheet HREF='macdefault.css' TYPE='text/css'>");                                 
                }                
        }
        else
        {
                // if not mac then
        
                if(is_ie)
                {
                        // if ie5
                        document.write("<LINK REL=stylesheet HREF='ie.css' TYPE='text/css'>");                         
                }
                else
                {
                        // else if netscape or opera
                        document.write("<LINK REL=stylesheet HREF='mozilla.css' TYPE='text/css'>");                         
                }
                
                
        }

The above code detects what browser version is being used and creates a line that will include the correct stylesheet. In this case I have created 4 stylesheets, one for Internet Explorer, one for Mozilla, one for the Apple Mac and one for IE on the Mac. This script is currently working on this site however it probably needs updating.

Of course you also have to create the stylesheets that are being "called" above for this script to work. The names of these stylesheets are:

ie5mac.css
macdefault.css
ie.css
mozilla.css

Next let us create a stylesheet which will work in most browsers.

arrowdown Creating a stylesheet