0

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?

skaffman
  • 398,947
  • 96
  • 818
  • 769
mahen23
  • 720
  • 2
  • 11
  • 24
  • 2
    Why do you want to do this? Are you intending to work around FF4-only bugs? (If so, what will you do if an updated version of FF4 fixes the bugs?) If at all possible, target standards rather than browsers, and avoid trying to code for individual browsers. -- I'm sure you know this and have a very good reason for wanting to detect FF4 specifically, but it needs to be said :-). – Gareth McCaughan Apr 07 '11 at 10:56

3 Answers3

1

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.

Eldar Djafarov
  • 23,327
  • 2
  • 33
  • 27
  • I'd avoid the user agent string on the backend as well, as it can be suppressed or overridden by the user (or even by an intermediate proxy), so it's not reliable. So the only reliable method left is using Javascript. – Spudley Apr 07 '11 at 11:11
1

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 :)

Mark Keats
  • 1,390
  • 8
  • 15
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)

Community
  • 1
  • 1
Spudley
  • 166,037
  • 39
  • 233
  • 307
  • thank you. You are right, both IE9 and FF4 follow standards very well, so the problem must be with my code. I will re-check and avoid using hacks. – mahen23 Apr 07 '11 at 11:58
  • @mahen23 - if you still have problems, feel free to ask a question about the specific code that's going wrong. :) – Spudley Apr 07 '11 at 12:01
  • I have noticed a few quirks and possible bugs with FF4. One difference we recently found out is that [overflow is no longer supported on table-group elements](https://developer.mozilla.org/en/Firefox_4_for_developers) (so they are no longer scrollable). I've also noticed a possible bug on height implementation for select elements, but haven't gotten around to fully investigating this one. – JGarrido Apr 25 '11 at 15:23