Welcome to the new design! Please report any bugs or issues, thanks :)
Web Dev + WordPress + Security

CSS Hacks for Different Versions of Firefox

[ Firefox ] In a perfect world, I don’t use CSS hacks, and certainly don’t recommend them. In the unpredictable, chaos of the real world, however, there are many situations where applying styles to particular browsers is indeed the optimal solution. Most of the time, I am targeting or filtering Internet Explorer (because it is so incredibly awesome), but occasionally I need to tweak something in a modern browser like Firefox, Safari, or Opera. In this article, we’ll look at CSS hacks targeting different versions of Firefox.

Some of these CSS hacks don’t validate, others are proprietary, and some are completely valid (depending on CSS specification). I have tested these hacks to the best of my ability, but don’t let that stop you from checking things out on your own (in fact, I absolutely recommend doing so). These Firefox hacks are organized according to version number and presented with ease of copying and pasting in mind. That said, here are some notes that apply to all of the hacks in this article:

  • For each hack, change only #selector, .selector, and of course the declaration blocks.
  • Hacks that do not validate as CSS are designated with [!] in the associated comment.
  • If you discover any inconsistencies, incompatibilities, or inoperabilities, please leave a comment.
  • This post is a work in progress. Please share any Firefox hacks that are not on the list.

Also keep in mind that, in general, there are two types of CSS hacks: those that target and those that filter. By targeting, we are referring to the application of CSS styles to a particular, targeted browser (or set of browsers) at the exclusion of all others. Conversely, by filtering, we are referring to the application of CSS styles to every browser except a particular browser (or set of browsers). In essence, this hack dichotomy represents two sides of the same coin. How you classify these various hacks all depends on perspective.

CSS Hacks targeting all Firefox

These hacks target all versions of Firefox:

/* Target all Firefox */
#selector[id=selector] { color: red; }

/* Target all Firefox */ 
@-moz-document url-prefix() { .selector { color: red; } } 

/* Target all Gecko (includes Firefox) */
*>.selector { color: red; }

CSS Hacks targeting Firefox 1.5 and newer

This hack targets Firefox versions 1.5 and newer:

/* Target Firefox 1.5 and newer [!] */
.selector, x:-moz-any-link, x:only-child { color: red; }

CSS Hacks targeting Firefox 2 and older

These hacks target Firefox 2 and older:

/* Target Firefox 2 and older [!] */
body:empty .selector { color: red; }

/* Target Firefox 2 and older */
#selector[id=SELECTOR] { color: red; }

/* Target FireFox 2 and older [!] */
html>/**/body .selector, x:-moz-any-link { color: red; }

CSS Hacks targeting Firefox 3

This hack targets Firefox 3 (and possibly newer):

/* Target FireFox 3 [!] */
html>/**/body .selector, x:-moz-any-link, x:default { color: red; }

Got more?

Please help by sharing any Firefox hacks that target or filter specific versions of Firefox. Bonus points for anyone with a hack for filtering all versions of Firefox (and only Firefox).

Jeff Starr
About the Author
Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
.htaccess made easy: Improve site performance and security.

33 responses to “CSS Hacks for Different Versions of Firefox”

  1. Jonathan Hollin 2009/11/11 2:09 pm

    Excellent hack. You just saved the day for me, so I’d like to say, “thank you, very much!” ;-)

  2. Thanks so much for this. *>. has got FF displaying correctly for just small element. Wish I found this out about 5 hours ago and didn’t waste my time on working out the outer browsers.

  3. Jim Summer 2009/11/20 10:36 pm

    Only used this in FF 3.5.5
    Ex:
    ----------
    @-moz-document url-prefix(){
           /*firefox specific styles go in here*/
           #someID{top:3px;}
           .someClass{margin-right:8px;}
    }
    ———-
    Thank you,
    Jim Summer
    Jacksonville, FL

  4. Great Article Big Big Thanks for you. I was very upset because of layout problems
    that was occurring in FireFox Now it is easy for me to design for all IE and then use these hacks for FireFox.
    Thanks a lot
    God bless you.

  5. hi thanks for ur solution.

  6. @Stanko – I agree. :) FF users are smart to usually upgrade.

    Jeff – Thanks for this article! It really helped! Saved my day. Blasted IE!!

  7. how can i apply different styles for firefox version 3.0 and 3.6.Is it possible to do?

  8. Jeff Starr
    Jeff Starr 2010/04/07 4:28 pm

    @g: just style for 3.6 and then target 3.0 using the code in the article:

    html>/**/body .selector, x:-moz-any-link, x:default { color: red; }

  9. John Phillips 2010/04/29 5:58 am

    Thanks very much for a very useful article (and comments!)

    What about OS-specific hacks? Is that a silly question?

  10. Jeff Starr
    Jeff Starr 2010/05/02 1:29 pm

    @John: Nope, great question – it’s just not something covered in this post. I think I’ve touched on it in the past, but if not there are plenty of other resources available.

  11. #selector[id=selector] { color: red; }

    also targets Chrome

  12. Jeff Starr#20
    @g: just style for 3.6 and then target 3.0 using the code in the article:

    html>/**/body .selector, x:-moz-any-link, x:default { color: red; }

    This doesn’s seem to work for me, because the 3.0 hack seems to work for 3.6.3 also.

    Any ideas how to write styles only for FF 3.0?

    There is this nasty bug where FF 3.0 doesn’t accept line-height for input fields.

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
USP Pro: Unlimited front-end forms for user-submitted posts and more.
Thoughts
Playing the long game.
They have weaponized the idiots.
Good software never steals focus from the user. Even during startup.
After 10 years running my own business, I still manage schedules and tasks using old school post-it notes, sometimes simple sometimes very elaborate.
You know those sites, where you're trying to just grab a quick bit of information but the page is shifting all over the place as it loads up 3 million advertisements.
Selling two of my top WordPress domains, wp-zen.com & zen-wp.com $300 for both. Aged 9 years. Drop a line if interested.
Never force your users to type out a password (or any long string of characters) by blocking the paste function. Typing long strings leads to MORE errors than simple copy/paste.