Targeting only Firefox with CSS
browser-detection, css, firefox
Solution
This solution 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 of these CSS extensions right here: Mozilla CSS Extensions. ⚠ Do note that they are mostly deprecated!
For more information about this specific CSS extension, see this question: What does @-moz-document url-prefix() do?
Problem
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…