What do you want to learn today?
Treehouse is the best place to learn web design, web development, and iOS.

Code Snippet

Home » Code Snippets » CSS » CSS Hacks Targeting Firefox

CSS Hacks Targeting Firefox

Firefox 2

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

Firefox 3

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

Any Firefox

@-moz-document url-prefix() {
  .selector {
     color:lime;
  }
}

Subscribe to The Thread

  1. Robin

    Mayb I can test or guess it, but what does it do?

    Reply ↓
    • Andrew Champ

      It targets only Firefox browsers, so you can make CSS exceptions. You would use it for hacks, to make your site more functional. (If required).

      Most hacks are for I.E., since they can render a lot differently than other browsers.

  2. Tom

    Hey,

    thanks for the tip but its not working in Firefox 3.6.x anymore..

    Reply ↓
  3. Tom

    but thius one works!

    .selector, x:-moz-any-link, x:default { color:lime; } /* FireFox 3 */

    Reply ↓
  4. sistu

    @tom: thanks a lot! works fine for me!

    Reply ↓
  5. Mohit

    Thanks for the information provided.

    Please let me know about Firefox 4.0 and IE9 CSS hacks….

    Reply ↓
  6. Vindesh Mohariya

    Its very lovey hack for mozilla.

    it has resolved my mozilla-firefox problem.

    Thanks you
    Vindesh Mohariya

    Reply ↓
  7. @3kolone

    IE 9 hack …

    .selector { color: #fff\9; }

    Firefox 4 hacks anyone?

    Reply ↓
  8. Ruven

    great hack thank you.

    Reply ↓
  9. ysh

    uhmm.. what does it do? hehe sorry i’m a newbie to this. :))

    Reply ↓
  10. maggie

    Is it possible to use certain classes when FF loads page?

    Reply ↓
  11. jacvk

    @-moz-document url-prefix() doesnt seem to be working in Firefox 7. Any other ideas?

    Reply ↓
  12. mee

    Mmhhh, if I use the any FF hack with a a:hover or so. It dosen’t work …

    @-moz-document url-prefix() {
    a:focus {padding-bottom: 7px;}
    }

    Has anyone help for that?

    Reply ↓
  13. mee

    I solved it. It was a structure problem …
    Thanks for the hot tip :-)

    Reply ↓
    • ahmet

      how did you solved it? i’m stuck at it.

    • guest 00

      @ahmet,

      people won’t reply once their problem is fix, mee is just one of those kind. i’m actually looking for the solution too.

      Cheers

  14. falguni

    Great ! thank you.

    Reply ↓
  15. bm

    do you know how to target FF9 only? I am actually having an issue of CSS rendering differently on Mac and PC using the same version of FF. Never had this problems in the past. Thank you

    Reply ↓
  16. Frederik

    nice list. thx

    Reply ↓
  17. Ron

    Awesome and timely. Thanks for the hack help!

    Reply ↓
  18. Roberto Bahena

    Hey Chris,
    Never really had the change to thank you, yours is the first site I go to when I need to learn or find something out on CSS. Your site is invaluable to us web devs. I’ve really learned a lot from your site, keep it up.

    Thanks

    Reply ↓
  19. Travis

    This doesn’t appear to be valid

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

    The CSS seems to be getting confused with the wrapping brackets which causes it to be invalid, any thoughts?

    Reply ↓
  20. Travis

    Looks like it works now, though only if I add !important at the end of the value…. weird. Also of note i am using a scss sheet

    Reply ↓
  21. Harry

    Looks great,
    Thanks you so much .
    it’s working fine.

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~