Detect firefox browser with jquery

Question

I facing a problem is my css is have a some bug when firefox is lower than 2.0. I would like to detect the browser to fix my css bug.

This is my code:

$(document).ready ( 
 function() {
  if ( $.browser.mozilla == true && $.browser.version < '3.0' ) {
   $('img.frameMargin').css('margin-left','35px');
  }
 }
);

But this code seem like not work.

Thank for advance.

Answer 1

This has been answered already in this discussion: In Javascript, how do I determine if my current browser is Firefox on a computer vs everything else?

To answer your question from that post, thanks to "BalusC" for the answer:

var FF = !(window.mozInnerScreenX == null);
if(FF) {
    // is firefox 
} else { 
    // not firefox 
}

Above posts advise to use jQuery.browser. But the jQuery API recommends against using this method.. (see DOCS in API).

jQuery API recommends to use 'jQuery.support' (http://api.jquery.com/jQuery.support/). The reason being is that jQuery.browser uses the user agent which can be spoofed and it is actually deprecated in later versions of jQuery. It's better to use feature detection instead of browser detection.

UPDATE:

jQuery.browser is now removed from jQuery as of version 1.9

http://api.jquery.com/jQuery.browser/

if you really need to use it.. jQuery.browser has been ported over as a separate jQuery plugin

https://github.com/gabceb/jquery-browser-plugin

hope that helps

Answer 2

I just bumped into this problem myself. $.browser.version actually detects the version of the rendering engine, and not the version of the browser (despite what its name implies), so if you want to detect Firefox 4 and later, you should use

$.browser.mozilla && $.browser.version > '2'

Because Firefox 4 uses Gecko 2.0 as the rendering engine. It's rather confusing, I know :)