CSS

Pedro Lucas Da Silva Cunha
Pedro Lucas Da Silva Cunha
5,276 Points

Targeting firefox only with CSS

I had a few issues with my website when viewed on firefox and I've been trying to incorporate some css that targets only that specific browser because IE and Chrome seem to be working just fine. Eventually I found this code and decided to try it but I was disappointed when it didn't work. Maybe there's something I did wrong?

  @-moz-document url-prefix() {
                        .logo {
                        width:486px;
                    }
                    }

2 Answers

James Barnett
James Barnett
39,188 Points

TL;DR Use this CSS hack instead -

body:not(:-moz-handler-blocked) .logo {
    width:486px;
  }

This worked for me in the most recent version of Firefox: http://codepen.io/jamesbarnett/pen/wctaA


Browser hacks are rarely needed outside of legacy IE (8 & below).

Usually it's case HTML/CSS not validating, not using normalize.css, or not using the correct vendor prefix for something.

However there are cases where you need a browser hack, I tried the one you had and it didn't work for me either remember TMTOWTDI (There's More that One Way to Do It), that's what browserhacks.com is for.

Hayden Taylor
Hayden Taylor
5,076 Points

Most likely not the answer you want... But you should build your website IN Firefox. I pretty much only use Firefox and rarely do other browsers give me problems besides IE.

Are you using a css reset?

Here is a framework that also solves your problem --> http://rafael.adm.br/css_browser_selector/

Here is another alternative:

/////<script type="text/javascript"> //// if ( $.browser.mozilla == true ) { //// document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"FF.css\">"); /// } ////</script>

Clearly the code above can be optimized, but you get the point.

Hope this helps