Syntax* 

Welcome to Pull Digital's technology blog Syntax*.

Using jQuery to Detect Browser Type and Version

The $.browser property provides information about the web browser that is accessing the page, as reported by the browser itself. This means with a little jQuery we can render the browser and browser version as a body class to be used where needed.

There are plenty of ways to modify your CSS depending on your browser capabilities. Libraries such as Modinizr help find features not supported by your browser and enable you to write work arounds, and some CMS's such as Kentico render the browser and version as a body class.

Recently I had to develop a static site and wanted to replicate the way that Kentico adds these classes, a quick trip to jQuery later I wrote the following:
 


// Loop through each of the available browsers
jQuery.each(jQuery.browser, function(i, val) {  
if(val != true){
// Render the browser type
        $(document.body).addClass("v"+parseInt(val));
    }
// Render the browser version
    else{
        $(document.body).addClass(i);
    }   
});


So in IE7 we get:

<body class="msie v7">

This class can then be used to style HTML elements:

.msie.v7 input{
width:auto;
}

Another option is to use jQuery.support, this allows targetting of indervidual browser capabilities such as box model, to then write alternative styles to non supporting browsers.

Some Of Our Clients

  • First-Central
  • Boux-Avenue
  • Conversis
  • John-Lewis
  • EY
  • Kompan
  • Living-Streets
  • Meteor
  • OSI
  • Schwarzkopf
  • GoCycle
  • SSTL
  • Chaucer-Direct
  • TurtleMat
  • UK200Group
  • ASDA
  • Vinci
  • Zoggs

We Deliver Marketing CertaintyTM

Find Out More