Plugin Sale! Save 15% on pro plugins with discount code: FALL2020
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 = Designer. Developer. Producer. Writer. Editor. Etc.
GA Pro: Add Google Analytics to WordPress like a pro.

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

  1. Amber Taylor 2010/06/17 12:42 pm

    Rock on! Normally I wouldn’t target Firefox because it does it’s job right, but unfortunately padding and buttons (input type=submit) don’t fly across the board in browser-land. Only Firefox messed up the vertical alignment of the text :( … So I used the @-moz-document url-prefix() to fix it. Thanks for this tip!

  2. Tx Thomas Scholz!. I added some code and all works fine in Thunderbird 3.1, Outlook 2007, Firefox 3.6.6 (Gmail), Chrome 5.0.375.99 (Gmail), IE8 (Gmail)

    Here’s my fix.


    .collapse { border-collapse: collapse }/* For Outlook */
    body:-moz-last-node .collapse { border-collapse: separate } /* Reset to default for Thunderbird */
    {/literal}
    ….

    And cells look like this

  3. Fix for last post


    <style type="text/css">
    .collapse { border-collapse: collapse }
    body:-moz-last-node .collapse { border-collapse: separate }
    </style>
    <body>

    <table width="490" border="0" cellpadding="0" cellspacing="0" class="collapse">

  4. Jeff Starr
    Jeff Starr 2010/07/18 1:13 pm

    Just a friendly reminder to wrap your code in <code> tags to prevent WordPress from eating it. Thanks!

  5. T Thank Thank u! hack for firefox is working.

  6. Thank you dude, you got a cool post, it solved my problem.

  7. Rene Kriest 2011/05/07 1:36 am

    Thx!

    Your CSS hacks saved my day due to weird font rendering output in FF.

  8. any updates for Firefox 4 ? thanks :S

  9. Sparklette 2011/05/19 10:57 am

    Ditto that. I would like a hack for Firefox 4 please.

    Here’s one for 3.5 (credit to http://paulirish.com/2009/browser-specific-css-hacks/)

    body:not(:-moz-handler-blocked) #selector { color: red; }

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 »
GA Pro: Add Google Analytics to WordPress like a pro.
Thoughts
Air finally clearing here in WA. Feeling grateful to breathe again. #oxygenmatters
Past week here in WA state has been hellish. So much smoke, like living in a chimney.
Now in September, I’m where I wanted to be in March.
Spent some time updating my article on unsafe characters, once again current with latest IETF specification.
Just realized that “Neo” is an anagram for “One”. As in, “he is the One” (The Matrix).
To get VLC app to load all songs (including subfolders), go to Preferences ▸ Show All ▸ Playlist ▸ Subdirectory behavior ▸ Expand.
Switching from PhotoShop to Affinity Photo is one of the most liberating work-related things I've done in 20 years.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.