Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,199 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