Grow your CSS skills. Land your dream job.

Last updated on:

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;
  }
}

Comments

  1. Permalink to comment#

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

    • 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. Permalink to comment#

    Hey,

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

    • Anjana
      Permalink to comment#

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

      This worked for firefox 31 also!!!!!

  3. Permalink to comment#

    but thius one works!

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

  4. sistu
    Permalink to comment#

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

  5. Mohit
    Permalink to comment#

    Thanks for the information provided.

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

  6. Its very lovey hack for mozilla.

    it has resolved my mozilla-firefox problem.

    Thanks you
    Vindesh Mohariya

  7. IE 9 hack …

    .selector { color: #fff\9; }

    Firefox 4 hacks anyone?

  8. great hack thank you.

  9. ysh
    Permalink to comment#

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

    • Riyaadh
      Permalink to comment#

      Elements does not always display the same in IE as it does in Firefox.
      So using \9 on an element will only target IE.

      Example:
      .whatever { margin: 20px 0 0 0;
      margin: 25px 0 0 0 \9;
      }

      In all browsers except IE margin-top will be 20px but in IE margin-top will be 25px.

      Hope this helped you!! :)

  10. maggie
    Permalink to comment#

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

  11. jacvk
    Permalink to comment#

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

  12. mee
    Permalink to comment#

    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?

  13. mee
    Permalink to comment#

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

    • ahmet
      Permalink to comment#

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

    • guest 00
      Permalink to comment#

      @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

    • nitesh
      Permalink to comment#

      How did you do it?

  14. falguni
    Permalink to comment#

    Great ! thank you.

  15. Permalink to comment#

    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

  16. Permalink to comment#

    nice list. thx

  17. Ron
    Permalink to comment#

    Awesome and timely. Thanks for the hack help!

  18. 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

  19. Travis
    Permalink to comment#

    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?

  20. Travis
    Permalink to comment#

    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

  21. Harry
    Permalink to comment#

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

  22. Permalink to comment#

    Great hack. Thank you!

  23. Thank you for the post. Worked perfectly. I guess most of the programs we work with (AKA Dreamweaver, CSSEdit, etc) will say an error with this hack since it has a double bracket {.
    At least is what I think happens with CSSEdit when I wrote it there.

    I’ve translated this post to spanish here.

    http://corchoweb.com/2012/codigo/hacks-de-css-especificos-para-firefox/

    Thanks again.

  24. Mandip Luitel
    Permalink to comment#

    Worked Perfectly :)

    Thanks

  25. Naga

    Any one help me to get solution
    Iam Using this code
    @-moz-document url-prefix() {} – it works in all firefox except Mac
    Please advice me.
    Thanks in advance..

  26. I am using slider to Unlock using jQuery. But doesn’t working well with Firefox. Please tell me What could be the alternative of -webkit-animation for firefox?.
    Thanks in advance !

  27. Dee
    Permalink to comment#

    how do you get this to work if using hover or focus states? thank you.

  28. Suleman
    Permalink to comment#

    When i use this code

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

    it works in my pc but when i upload the site on cpanel it does’nt work

  29. Geoff Kendall
    Permalink to comment#

    I’m by no means any sort of web design guru, but I have found over the course of making 25 or so web sites that if there is a difference between Firefox and IE9 and you aren’t being particularly experimental in your use of advanced CSS selectors, it makes sense to check one really basic thing: that your code validates, both html-wise and CSS-wise. Modern browsers really are pretty consistent, especially if you use a reset CSS such as Eric Meyer’s, but they certainly do different things in trying to make faulted code work. So if you didn’t already validate, it is definitely worth taking your code there first. IMHO.

  30. Whats about other web browsers (like Safari and Opera)??

    • Russell Crow
      Permalink to comment#

      This will work in Opera.

      noindex:-o-prefocus, .selector{

      margin-left: 3em;

      }

      For Safari. You need the extra brackets to wrap your selector and rules in the hack for webkit. I’ve noticed as I type this up it’s putting the second set of brackets on the same line. Those two brackets on the bottom need to be on a seperate line.

      @media all and (-webkit-min-device-pixel-ratio:0){
      .selector{

      margin-left: 3em;

      }
      }

  31. SAM
    Permalink to comment#

    It works.. Thanks :-) good Job

  32. Anonymous
    Permalink to comment#

    you are DA BOMB, man !!! Saved my butt.

  33. Permalink to comment#

    That’s great. Only, the code that targets all FF versions doesn’t validate. :(

    • Sorry @chris – no success by using @import, butI usually dont use import since a long time, so why do you do?

      @buelem thx for the link, why we have to do that for all these browsers… where is the time when 2 or 3 browser are up to date and not that much more…

  34. Thanks mate for this help :)

  35. Urooj
    Permalink to comment#

    thank a lot very usefull post for me

  36. Adrija
    Permalink to comment#

    Thanks a lot..its working perfectly..

  37. Gunjan
    Permalink to comment#

    Any specific CSS hack for MAC Chrome ??

  38. Thanks so much for posting this. Such an easy hack but so useful!

  39. Works \o/

  40. Blue Lem
    Permalink to comment#

    Thanks, that works great ^_^

  41. Blue Lem
    Permalink to comment#

    For anyone trying to target opera and safari you might to check this also

    http://www.webmonkey.com/2010/02/browser-specific_css_hacks/

  42. Permalink to comment#

    NIce Work!!!

  43. Permalink to comment#

    i have hard problem in my firefox css width any advice ?

  44. Permalink to comment#

    NIce Work! Thanks!

  45. Chris
    Permalink to comment#

    Has anyone had success using @import inside of moz specific css?
    Something like this:

    @-moz-document url-prefix() {
    @import url(“ff_font.css”);
    }

  46. Russell Crow
    Permalink to comment#

    I would like to have a hack that will target chrome and not Safari. Trouble is they are both webkit platforms. When I target Safari I sort of have to kind of divide the difference between Safari and Chrome.

  47. Satyajit

    Superb hack for firefox….many thanks…

  48. I have used this for quite some time now, and wanted to get back on here and thank you for these as they have made things a whole lot easier when cross-browser fixing websites.

  49. Any Firefox is not working in FF 22

  50. Hi There !
    I have question ! :
    How can i write special styles for firefox MOBILE ? ( For Firefox mobile application )

    Much Thanks

    Best Regards

  51. Hi Adrian,

    You simply wrap your Firefox stuff in a media query

    e.g.

    @media only screen and (min-width:320px){
     @-moz-document url-prefix() { 
      .selector {
         color:lime;
      }
     }
    }
    
    • Permalink to comment#

      Hey Summit Web Solutions,
      Thank you for the share! I needed Firefox specific media queries to polish off a client site.

  52. Permalink to comment#

    I’m really surprised this doesn’t work for you. It certainly looks like you have it typed correctly. You can go to my website and get into my stylesheet and see how I’ve used this foxfire hack. In my current stylesheet I have used it 42 times.

  53. Permalink to comment#

    Sharon ! I’m really surprised this doesn’t work for you. It certainly looks like you have it typed correctly. You can go to my website and get into my stylesheet and see how I’ve used this foxfire hack. In my current stylesheet I have used it 42 times.

  54. gaurav
    Permalink to comment#

    @-moz-document url-prefix() {
    div.orgChart tr.lines td.line {
    width : 1px;
    height : 35px;
    -moz-width : 1px;
    -moz-height : 35px;
    }

    div.orgChart tr.lines td.top {
    border-top : 3px solid black;
    -moz-border-top : 3px solid black;
    }

    div.orgChart tr.lines td.left {
    border-right : 2px solid black;
    -moz-border-right : 2px solid black;
    }

    div.orgChart tr.lines td.right {
    border-left : 2px solid black;
    -moz-border-left : 2px solid black;
    }
    }

  55. gaurav
    Permalink to comment#

    above code for create a line in chart
    but there are not working

  56. Satbir
    Permalink to comment#

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

    it is working now

    (*class) this is hack for i8 only
    (padding=0px 0px 0px 0px\9) this hack for ie9,ie10

  57. Permalink to comment#

    I know this post has been kicking around for a while now! But should this hack be working in the very latest version of Firefox?

    I have a repeating background issue I want to fix up on a pseudo element!

    If it’s not working, is there a newer solution?

    Thanks.

    • Permalink to comment#

      Okay, so the Firefox 3 version worked for me in the end. But for whatever reason I can’t get Firefox any version to play ball.

      Anyway, it now works, which is great!

      Thanks Chris.

  58. Lucky Bhumkar
    Permalink to comment#

    Worked! Thanks for saving time

  59. GANESH MURTHY

    This works!!! Thanks :)

  60. it is not working in media queries. can anyone suggest me how to use it inside of media queries

  61. jack
    Permalink to comment#

    how about for ie

  62. chris smith
    Permalink to comment#

    Thanks man. perfect. just what i needed… always get the good stuff here.

  63. Permalink to comment#

    Thank you so much for posting this. I have been working on styling a really complicated slider for 2 days now, only on the third to realize that firefox took some of my CSS and just started making pixel values up. Quite annoying.

    I used the Firefox any version and it’s working fine.

  64. Krishnan
    Permalink to comment#

    Any hacks for Mozilla below 32 and above 33??

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".