CODEWITHSUNDEEP
cssfirefox
OneNerd
OneNerd

Reputation: 6552

Detecting if Firefox 3.5, or Firefox 3.0 or lower

I have to admit I never had to worry about Firefox versions before when it came to CSS, but for some reason, FF 3.5 is not positioning some of my elements properly as compared to how FF2 and FF3.0 do.

Now I am faced with having to detect if its FF 3.5.

Here is what I do now for handling CSS across FF and IE:

<!-- MAIN STYLESHEET -->
<link rel=stylesheet href="./inc/style.css" type="text/css">

<!-- IE STYLE SHEET -->
<!--[if IE]> <style type="text/css">@import "./inc/style.ie.css";</style> 
<![endif]-->

Now I need to add a 3rd option I suppose, but how? Is there a way to do this, or am I faced with having to implement some sort of JavaScript solution?

Thanks -

Upvotes: 6

Views: 16639

Answers (6)

Igor Simic
Igor Simic

Reputation: 540

looks like there is a CSS solution, try this

    @-moz-document url-prefix() {
  .selector {
     color:lime;
  }
}

Upvotes: 1

OneNerd
OneNerd

Reputation: 6552

My (short-term) solution was to use jQuery like this:

$(document).ready ( 
  function() {
    if ( $.browser.mozilla == true && $.browser.version == '1.9.1' ) {
      // modify css here
    }
  }
);

Note the $.browser.version is not 3.5 like you might think (but instead it returns the rendering engine version). Also, the $.browser does not have a firefox value apparently, it just returns mozilla for all mozilla-based browsers.

Assuming this will meet my short-term needs. Thanks -

Upvotes: 9

James Skidmore
James Skidmore

Reputation: 50338

The first thing I'd do would be to try to solve the problem without a browser-specific CSS fix. Usually it just takes a little bit more thought to come up with a cross-browser solution. Post your CSS problem here, and then we can try and fix it :)

But to directly answer your question, unfortunately you're going to have to use Javascript for this one. But fortunately, there is a really simple solution.

Load this JavaScript file, and then you can use these properties:

  • BrowserDetect.browser
  • BrowserDetect.version
  • BrowserDetect.OS

Then you can do something like:

if (BrowserDetect.browser == 'Firefox' && BrowserDetect.version == '3.5')
{
  // Load CSS file
}

http://www.quirksmode.org/js/detect.html

Upvotes: 3

Russ Bradberry
Russ Bradberry

Reputation: 10875

you can check the userAgent using JavaScript

Upvotes: 0

Henrik Hansen
Henrik Hansen

Reputation: 2190

There is no way to do it using browser tags. You'll have to use browser sniffing (using JavaScript to detect the browser), to load the correct style sheets.

If you are using a JavaScript library like Mootools or jQuery, then there are some functions to do that.

You could also, as another solution, detect it on the server and then send an alternate stylesheet.

Upvotes: 3

janhartmann
janhartmann

Reputation: 15003

There is no conditional comments for Firefox. You might have to check User Agent and include stylesheets on the result of that.

Upvotes: 0

Related Questions