Can I add an if statement for mozilla firefox stylesheet?

Question

Hi I'm editing a website that has been made compatable with internet explorer so it doesn't work in firefox.

Is there any way to add a firefox or mozilla stylesheet?

Thanks for you help Judi

<!--[if FIREFOX]>
    <link rel="stylesheet" type="text/css" href="/AEBP_Homepage_12887/css/firefox.css" />
<![endif]-->

Solution 1

No. The <!--[if IE]><![endif]--> syntax is Internet Explorer specific. It is a non-standard microsoft extension to CSS.

See conditional comments for more details.

Solution 2

You can't do anything as elegant as the Paul Irish solution for IE but you can create a FF specific set of definitions using:

@-moz-document url-prefix() { CSS BLOCK }

Before anyone starts jumping up and down screaming "THIS SHOULD NEVER HAVE TO HAPPEN UNLESS YOU DID SOMETHING WRONG" - it totally happens when we're talking about Firefox vs Chrome vs IE font rendering on a tightly constrained grid with a lot of left to right text justification.

You might also try out the CSS Browser selector:

http://rafael.adm.br/css_browser_selector/

This simple JS file allows you to append things like .gecko and .ff3 to your CSS.

* APPENDED - 2014 *

I want to actually append this because, two years later, the standard solution is to perform feature detection through modernizr.js instead of browser detection. "Firefox" is a very blunt instrument with all the versions hanging around the net. This answer still works, it's just not the recommended solution unless you very specifically need the browser, all versions, and nothing else.

Solution 3

One way to do this, with php is to look at the user agent and see what browser is it. This is what I use:

Ex:

if (preg_match('/Firefox|Chrome|Opera|Safari|MSIE 8.0/', $_SERVER['HTTP_USER_AGENT'])) { 

link rel="stylesheet" href="one.css" type="text/css" media="screen"
}

else {
link rel="stylesheet" href="other.css" type="text/css" media="screen"
}

Also in the preg_match function you should enter the agents that you want. Have in mind, if you don't know php, that the example I wrote needs editing and correct formatting.

Solution 4

No, conditional comments are entirely an Internet Explorer thing AFAIK.

However, you can create a conditional comment that IE will not parse and thus is for non-IE browsers only:

<![if !IE]>
<link rel="stylesheet" type="text/css" href="/AEBP_Homepage_12887/css/firefox.css" />
<![endif]>

this is however not valid HTML. There seem to be workarounds to make it valid. Check out the "Downlevel-Revealed conditional comment" paragraph in the Wikipedia article.

View more solutions

Comments

[Dominic Rodger]

How about moving the changes made to make it incompatible with FF to an IE only stylesheet instead? Chances are, that'll help you with forward-compatibility, since it's almost certainly the case that the things you've had to do to make it work in IE rely on IE's somewhat flaky implementation of web standards.

[Pekka]

True, I just wondered myself (have never used it before). There's more in the Wikipedia article, I'll add a note.

[Diana]

Works for me. I know FF and webkit are pretty compliant but you can't rely on this on bad third-part css.

[Imperative]

Made a quick update on this, since it's been two years.