Targeting only Firefox with CSS

Question

Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules:

<!--[if IE 6]> ...include IE6-specific stylesheet here... <![endif]--> 

Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be best way to target only Firefox with your CSS rules and not a single other browser? That is, not only should Internet Explorer ignore the Firefox-only rules, but also WebKit and Opera should.

Note: I'm looking for a 'clean' solution. Using a JavaScript browser sniffer to add a 'firefox' class to my HTML does not qualify as clean in my opinion. I would rather like to see something that depends on browser capabilities, much like conditional comments are only 'special' to IE…

Answer 1

OK, I've found it. This is probably the cleanest and easiest solution out there and does not rely on JavaScript being turned on.

@-moz-document url-prefix() {   h1 {     color: red;   } }

<h1>This should be red in FF</h1>

It's based on yet another Mozilla specific CSS extension. There's a whole list for these CSS extensions right here: Mozilla CSS Extensions.

Answer 2

Updated(from @Antoine comment)

You can use @supports

@supports (-moz-appearance:none) {      h1 { color:red; }   }

<h1>This should be red in FF</h1>

More on @supports here