What about detecting Firefox 4?

Question

I know there is the conditional comments:

 <!--[if IE 9]>
        <link rel="stylesheet" type="text/css" href="css/ie9-only.css" />
        <![endif]-->

to detect Internet Explorer 9, but what about Firefox 4? How do I load a style only for Firefox 4?

Answer 1

If you must detect the browser and version for FF4, the best answer is to use jQuery's browser() method.

However, I would agree with the comment by @Gareth McCaughan: if you find yourself having to do browser detection (for anything other than IE6/7 and possibly IE8), then it's very highly likely that you're doing something wrong. The fact that you're using it for IE9 in your question indicates that you're probably already getting it wrong.

All the modern browsers, including both IE9 and FF4 have excellent standards support, and a well-written page should render virtually identically in all of them.

If you do have something that renders differently in IE9 or Firefox 4 compared with other modern browsers, please specify what it is, because there may be a better solution than browser detection to get around it.

There is only one thing that I know of in FF4 which might need you to resort to this, and that's text-overflow:ellipsis, which is supported in all modern browsers except Firefox. See my earlier question on this topic here: text-overflow:ellipsis in Firefox 4? (and FF5)

Answer 2

You can't "detect" firefox in the same way. Conditional comments is IE only "feature". You have to detect it through user agent string on the backend. Or using javascript.

Answer 3

There are no conditional comments in FireFox to do this, if you really need to your best option would be to use jQuery (or similar) to load the relevant stylesheets.

$(document).ready(function() {
    if ($.browser.mozilla && $.browser.version == '2.0') {
        $('head').append($("<link>").attr({type: 'text/css', rel: 'stylesheet', href: 'css/firefox4-only.css'}));
    }
});

I personally wouldn't recommend browser detection though, and you should be using web standards and feature detection if needed :)