Targeting only Firefox with CSS

css firefox css-hack
avdgaag picture avdgaag · Jun 4, 2009 · Viewed 589.4k times · Source

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

Ionuț G. Stan picture Ionuț G. Stan · Jun 5, 2009

OK, I've found it. This is probably the most clean and easy 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.

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Custom CSS Scrollbar for Firefox

I want to customize a scrollbar with CSS. I use this WebKit CSS code, which works well for Safari and Chrome: ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece { background-color: #C2D2E4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0A4C95; } How can …

Read More
How to remove Firefox's dotted outline on BUTTONS as well as links?

I can make Firefox not display the ugly dotted focus outlines on links with this: a:focus { outline: none; } But how can I do this for <button> tags as well? When I do this: button:focus { outline: none; } …

Read More