[Solved -7 Answers] CSS – Targeting only Firefox with CSS

PROBLEM:

• Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules:

[pastacode lang=”css” manual=”%3C!–%5Bif%20IE%206%5D%3E%0A…include%20IE6-specific%20stylesheet%20here…%0A%3C!%5Bendif%5D–%3E%0A” message=”css code” highlight=”” provider=”manual”/]

• Sometimes it is the Gecko engine (Firefox) that misbehaves. What would be best way to target only Firefox with your CSS rules and not a single other browser? That is, not only should Internet Explorer ignore the Firefox-only rules, but also WebKit and Opera should.

SOLUTION 1:

• This is probably the most clean and easy solution out there and does not rely on JavaScript being turned on.

[pastacode lang=”markup” manual=”%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%40-moz-document%20url-prefix()%20%7B%0A%20%20%20%20h1%20%7B%0A%20%20%20%20%20%20%20%20color%3A%20red%3B%20%20%20%20%7D%7D%0A%3C%2Fstyle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%3Ch1%3EThis%20should%20be%20red%20in%20FF%3C%2Fh1%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A” message=”html code” highlight=”” provider=”manual”/]

• It’s based on yet another Mozilla specific CSS extension.

SOLUTION 2:

• Here is how to tackle three different browsers: IE, FF and Chrome

[pastacode lang=”css” manual=”%3Cstyle%20type%3D’text%2Fcss’%3E%0A%2F*This%20will%20work%20for%20chrome%20*%2F%0A%23categoryBackNextButtons%0A%7B%20%20%20%20%0Awidth%3A490px%3B%7D%0A%2F*This%20will%20work%20for%20firefox*%2F%0A%40-moz-document%20url-prefix()%20%0A%7B%0A%20%20%20%20%23categoryBackNextButtons%0A%7B%0A%20%20%20%20%20%20%20%20width%3A486px%3B%20%20%20%20%7D%7D%0A%3C%2Fstyle%3E%0A%3C!–%5Bif%20IE%5D%3E%0A%3Cstyle%20type%3D’text%2Fcss’%3E%0A%2F*This%20will%20work%20for%20IE*%2F%0A%23categoryBackNextButtons%0A%7B%20%20%20%0A%20width%3A486px%3B%0A%7D%0A%3C%2Fstyle%3E%0A%3C!%5Bendif%5D–%3E%0A” message=”css code” highlight=”” provider=”manual”/] [ad type=”banner”]

SOLUTION 3:

• Here is some browser hacks for targeting only the Firefox browser,

Using selector hacks.

[pastacode lang=”css” manual=”_%3A-moz-tree-row(hover)%2C%20.selector%20%7B%7D” message=”css code” highlight=”” provider=”manual”/]

JavaScript Hacks

[pastacode lang=”css” manual=”var%20isFF%20%3D%20!!window.sidebar%3B%0A%0Avar%20isFF%20%3D%20’MozAppearance’%20in%20document.documentElement.style%3B%0A%0Avar%20isFF%20%3D%20!!navigator.userAgent.match(%2Ffirefox%2Fi)%3B%0A” message=”css code” highlight=”” provider=”manual”/]

Media Query Hacks

• This is gonna work on, Firefox 3.6 and Later

[pastacode lang=”css” manual=”%40media%20screen%20and%20(-moz-images-in-menus%3A0)%20%7B%7D%0A” message=”css code” highlight=”” provider=”manual”/]

SOLUTION 4:

• Using -engine specific rules ensures effective browser targeting.

[pastacode lang=”markup” manual=”%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20%2F%2FOther%20browsers%0A%20%20%20%20color%20%3A%20black%3B%0A%20%20%20%20%2F%2FWebkit%20(Chrome%2C%20Safari)%0A%20%20%20%20%40media%20screen%20and%20(-webkit-min-device-pixel-ratio%3A0)%20%0A%7B%20%0A%20%20%20%20%20%20%20%20color%3Agreen%3B%20%20%20%20%0A%7D%0A%20%20%20%20%2F%2FFirefox%0A%20%20%20%20%40media%20screen%20and%20(-moz-images-in-menus%3A0)%20%0A%7B%0A%20%20%20%20%20%20%20%20color%3Aorange%3B%20%20%20%0A%20%7D%0A%3C%2Fstyle%3E%0A%2F%2FInternet%20Explorer%0A%3C!–%5Bif%20IE%5D%3E%0A%20%20%20%20%20%3Cstyle%20type%3D’text%2Fcss’%3E%0A%20%20%20%20%20%20%20%20color%3Ablue%3B%0A%20%20%20%20%3C%2Fstyle%3E%0A%3C!%5Bendif%5D–%3E%0A” message=”html code” highlight=”” provider=”manual”/] [ad type=”banner”]

SOLUTION 5:

• you can use this:

[pastacode lang=”css” manual=”body%3Anot(%3A-moz-handler-blocked)%20h1%20%0A%7B%0A%20%20%20%20color%3A%20red%3B%0A%20%20%7D%0A%3Ch1%3EThis%20should%20be%20red%20in%20FF%3C%2Fh1%3E%0A” message=”css code” highlight=”” provider=”manual”/]

SOLUTION 6:

Firefox 2 :

[pastacode lang=”css” manual=”html%3E%2F**%2Fbody%20.selector%2C%20x%3A-moz-any-link%20%0A%7B%0A%20%20color%3Alime%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]

Firefox 3 :

[pastacode lang=”css” manual=”html%3E%2F**%2Fbody%20.selector%2C%20x%3A-moz-any-link%2C%20x%3Adefault%20%0A%7B%0A%20%20color%3Alime%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]

Any Firefox :

[pastacode lang=”css” manual=”%40-moz-document%20url-prefix()%20%0A%7B%20%0A%20%20.selector%0A%20%7B%0A%20%20%20%20%20color%3Alime%3B%20%20%7D%7D%0A” message=”css code” highlight=”” provider=”manual”/]

SOLUTION 7:

• The only way to do this is via various CSS hacks, which will make your page much more likely to fail on the next browser updates.
• If anything, it will be LESS safe than using a js-browser sniffer.

[ad type=”banner”]