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. User Avatar
    Robin
    Permalink to comment#

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

    • User Avatar
      Andrew Champ
      Permalink to comment#

      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.

    • User Avatar
      David
      Permalink to comment#

      Quite possibly the best little hack I have come across in ages! A little golden nugget. Thank you.

  2. User Avatar
    Tom
    Permalink to comment#

    Hey,

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

    • User Avatar
      Anjana
      Permalink to comment#

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

      This worked for firefox 31 also!!!!!

  3. User Avatar
    Tom
    Permalink to comment#

    but thius one works!

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

  4. User Avatar
    sistu
    Permalink to comment#

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

  5. User Avatar
    Mohit
    Permalink to comment#

    Thanks for the information provided.

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

  6. User Avatar
    Vindesh Mohariya

    Its very lovey hack for mozilla.

    it has resolved my mozilla-firefox problem.

    Thanks you
    Vindesh Mohariya

  7. User Avatar
    @3kolone

    IE 9 hack …

    .selector { color: #fff\9; }

    Firefox 4 hacks anyone?

  8. User Avatar
    ysh
    Permalink to comment#

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

    • User Avatar
      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!! :)

    • User Avatar
      Yeswanth

      @Riyaadh .. “\9” says less than IE 9

  9. User Avatar
    maggie
    Permalink to comment#

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

    • User Avatar
      Eric Sebasta
      Permalink to comment#

      you can do that with php on the server side- or with javascript:

      if (navigator.userAgent.match(/firefox/i)) {
      document.getElementById("myID")..className += " firefox"
      // $('#myID').addClass('firefox') 
      }
      

      If you have jQuery the commented out code works and read a bit easier.

  10. User Avatar
    jacvk
    Permalink to comment#

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

    • User Avatar
      lawrence
      Permalink to comment#

      write that your -moz-webkit-appearance in your actual css.

  11. User Avatar
    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?

  12. User Avatar
    mee
    Permalink to comment#

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

    • User Avatar
      ahmet
      Permalink to comment#

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

    • User Avatar
      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

    • User Avatar
      nitesh
      Permalink to comment#

      How did you do it?

  13. User Avatar
    falguni
    Permalink to comment#

    Great ! thank you.

  14. User Avatar
    bm
    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

  15. User Avatar
    Frederik
    Permalink to comment#

    nice list. thx

  16. User Avatar
    Ron
    Permalink to comment#

    Awesome and timely. Thanks for the hack help!

  17. User Avatar
    Roberto Bahena
    Permalink to comment#

    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

  18. User Avatar
    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?

  19. User Avatar
    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

  20. User Avatar
    Federico Bozo
    Permalink to comment#

    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.

  21. User Avatar
    Mandip Luitel
    Permalink to comment#

    Worked Perfectly :)

    Thanks

  22. User Avatar
    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..

  23. User Avatar
    Dheeraj
    Permalink to comment#

    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 !

  24. User Avatar
    Dee
    Permalink to comment#

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

    • User Avatar
      Eric Sebasta
      Permalink to comment#
      @-moz-document url-prefix() {
            #mydiv:hover {
               opacity: 1;
            }
        }
      
  25. User Avatar
    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

  26. User Avatar
    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.

  27. User Avatar
    Saket Jajodia
    Permalink to comment#

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

    • User Avatar
      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;

      }
      }

  28. User Avatar
    SAM
    Permalink to comment#

    It works.. Thanks :-) good Job

  29. User Avatar
    Anonymous
    Permalink to comment#

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

  30. User Avatar
    Adam
    Permalink to comment#

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

    • User Avatar
      Tommy

      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…

  31. User Avatar
    Urooj
    Permalink to comment#

    thank a lot very usefull post for me

  32. User Avatar
    Gunjan
    Permalink to comment#

    Any specific CSS hack for MAC Chrome ??

  33. User Avatar
    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/

  34. User Avatar
    hopeeg
    Permalink to comment#

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

  35. User Avatar
    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”);
    }

  36. User Avatar
    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.

  37. User Avatar
    Satyajit

    Superb hack for firefox….many thanks…

  38. User Avatar
    My Josephine
    Permalink to comment#

    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.

  39. User Avatar
    Arian Tashakkor
    Permalink to comment#

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

    Much Thanks

    Best Regards

  40. User Avatar
    Summit Web Solutions
    Permalink to comment#

    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;
      }
     }
    }
    
    • User Avatar
      Michael
      Permalink to comment#

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

    • User Avatar
      Alex

      Thanks a bunch, Summit Web Solutions. This solved my problem :)

  41. User Avatar
    Russ Crow
    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.

  42. User Avatar
    Russ Crow
    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.

  43. User Avatar
    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;
    }
    }

  44. User Avatar
    gaurav
    Permalink to comment#

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

  45. User Avatar
    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

  46. User Avatar
    jason
    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.

    • User Avatar
      Jason
      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.

  47. User Avatar
    Lucky Bhumkar
    Permalink to comment#

    Worked! Thanks for saving time

  48. User Avatar
    GANESH MURTHY

    This works!!! Thanks :)

  49. User Avatar
    Mohd Javed

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

    • User Avatar
      Eric Sebasta
      Permalink to comment#

      use the media query to load a css document. Put it in there. Then it always works.

      <link rel='stylesheet' 
      media='(min-width: 641px) and (max-width: 799px)' 
      href='medium.css' />
      
  50. User Avatar
    jack
    Permalink to comment#

    how about for ie

  51. User Avatar
    Toni B
    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.

  52. User Avatar
    Krishnan
    Permalink to comment#

    Any hacks for Mozilla below 32 and above 33??

  53. User Avatar
    jone
    Permalink to comment#

    Any Firefox is not working in FF 22

  54. User Avatar
    Rizban Ahmad
    Permalink to comment#

    Css for any firefox not working

  55. User Avatar
    kedar nath Singh
    Permalink to comment#

    Thanks it’s really helpfull for me.

  56. User Avatar
    Frank
    Permalink to comment#

    I found a comprehensive list of browser targeting media queries but I’ve lost it.

    Does anyone have a good list that has all of them?
    I don’t care about obsolete browsers but All current browsers.

  57. User Avatar
    Brian
    Permalink to comment#

    Any updates for this? I am stuck with targeting just firefox. Firefox 36.0.1

    Thanks
    Brian

  58. User Avatar
    sajjad
    Permalink to comment#

    Awesome! It’s work for me

  59. User Avatar
    Danny
    Permalink to comment#

    This works great, did exactly what I needed. Thank you :)

  60. User Avatar
    manu
    Permalink to comment#

    Great!!Thanks!!

  61. User Avatar
    Harsh
    Permalink to comment#

    Hi I have firefox version 44.0.2.How can i apply css hack for this version.

    • User Avatar
      Matt Urenovich
      Permalink to comment#

      Use the any firefox snippet and it will target any version of firefox

  62. User Avatar
    waqas

    thank you so much dear
    you solved my big problem

  63. User Avatar
    Matt Urenovich
    Permalink to comment#

    Awesome!! These are great especially when you have pesky little bugs with pseudo elements in different browsers. Another Awesome Snippt thank you so much!!!

  64. User Avatar
    Arbnor
    Permalink to comment#

    Thanks a lot. The third code works perfectly

  65. User Avatar
    bilal rabbi
    Permalink to comment#

    extremely helpful in my current project. 5 Stars from my side

  66. User Avatar
    LonK
    Permalink to comment#

    Excellent! This works for me. Was having trouble with the amazing but rather tightly coded ‘Newspaper’ theme. Any CSS tweak seemed to break the layout when viewed in Firefox. Just adding the plugin plus, .gecko or .webkit in front of the dot-whatever CSS tweak in the Style.css file controlled the custom adjustment to either Chrome or Firefox browsers.

    Thank you !

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag