{"id":2051,"date":"2017-03-24T15:27:54","date_gmt":"2017-03-24T09:57:54","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=2051"},"modified":"2017-03-28T16:30:28","modified_gmt":"2017-03-28T11:00:28","slug":"targeting-firefox-css","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/targeting-firefox-css\/","title":{"rendered":"[Solved -7 Answers] CSS &#8211; Targeting only Firefox with CSS"},"content":{"rendered":"<p><label class=\"label label-warning\">PROBLEM:<\/label><\/p>\n<ul>\n<li>Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules:<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%3C!\u2013%5Bif%20IE%206%5D%3E%0A\u2026include%20IE6-specific%20stylesheet%20here\u2026%0A%3C!%5Bendif%5D\u2013%3E%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>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.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 1:<\/label><\/p>\n<ul>\n<li>This is probably the most clean and easy solution out there and does not rely on JavaScript being turned on.<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%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\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<ul>\n<li>It\u2019s based on yet another Mozilla specific CSS extension.<\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 2:<\/label><\/p>\n<ul>\n<li>Here is how to tackle three different browsers: IE, FF and Chrome<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%3Cstyle%20type%3D\u2019text%2Fcss\u2019%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!\u2013%5Bif%20IE%5D%3E%0A%3Cstyle%20type%3D\u2019text%2Fcss\u2019%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\u2013%3E%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 3:<\/label><\/p>\n<ul>\n<li>Here is some browser hacks for targeting only the Firefox browser,<\/li>\n<\/ul>\n<h4 id=\"using-selector-hacks\"><span style=\"color: #808000;\"><b>Using selector hacks.<\/b><\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201d_%3A-moz-tree-row(hover)%2C%20.selector%20%7B%7D\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h4 id=\"javascript-hacks\"><span style=\"color: #800080;\"><b>JavaScript Hacks<\/b><\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201dvar%20isFF%20%3D%20!!window.sidebar%3B%0A%0Avar%20isFF%20%3D%20\u2019MozAppearance\u2019%20in%20document.documentElement.style%3B%0A%0Avar%20isFF%20%3D%20!!navigator.userAgent.match(%2Ffirefox%2Fi)%3B%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h4 id=\"media-query-hacks\"><span style=\"color: #808000;\"><b>Media Query Hacks<\/b><\/span><\/h4>\n<ul>\n<li>This is gonna work on, Firefox 3.6 and Later<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201d%40media%20screen%20and%20(-moz-images-in-menus%3A0)%20%7B%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 4:<\/label><\/p>\n<ul>\n<li>Using -engine specific rules ensures effective browser targeting.<\/li>\n<\/ul>\n[pastacode lang=\u201dmarkup\u201d manual=\u201d%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!\u2013%5Bif%20IE%5D%3E%0A%20%20%20%20%20%3Cstyle%20type%3D\u2019text%2Fcss\u2019%3E%0A%20%20%20%20%20%20%20%20color%3Ablue%3B%0A%20%20%20%20%3C%2Fstyle%3E%0A%3C!%5Bendif%5D\u2013%3E%0A\u201d message=\u201dhtml code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n[ad type=\u201dbanner\u201d]\n<p><label class=\"label label-info\">SOLUTION 5:<\/label><\/p>\n<ul>\n<li>you can use this:<\/li>\n<\/ul>\n[pastacode lang=\u201dcss\u201d manual=\u201dbody%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\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 6:<\/label><\/p>\n<h4 id=\"firefox-2\"><span style=\"color: #800080;\"><b>Firefox 2 :<\/b><\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201dhtml%3E%2F**%2Fbody%20.selector%2C%20x%3A-moz-any-link%20%0A%7B%0A%20%20color%3Alime%3B%0A%7D%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h4 id=\"firefox-3\"><strong><span style=\"color: #808000;\">Firefox 3 :<\/span><\/strong><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201dhtml%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\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<h4 id=\"any-firefox\"><span style=\"color: #800080;\"><b>Any Firefox :<\/b><\/span><\/h4>\n[pastacode lang=\u201dcss\u201d manual=\u201d%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\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/]\n<p><label class=\"label label-info\">SOLUTION 7:<\/label><\/p>\n<ul>\n<li>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.<\/li>\n<li>If anything, it will be LESS safe than using a js-browser sniffer.<\/li>\n<\/ul>\n[ad type=\u201dbanner\u201d]\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM: Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules: [pastacode lang=\u201dcss\u201d manual=\u201d%3C!\u2013%5Bif%20IE%206%5D%3E%0A\u2026include%20IE6-specific%20stylesheet%20here\u2026%0A%3C!%5Bendif%5D\u2013%3E%0A\u201d message=\u201dcss code\u201d highlight=\u201d\u201d provider=\u201dmanual\u201d\/] 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 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,24],"tags":[4367,4369,4371,4366,4364,4370,4377,4363,4361,4376,4375,4372,4365,4374,4373,4368,4362],"class_list":["post-2051","post","type-post","status-publish","format-standard","hentry","category-css","category-html","tag-browser-specific-css-hacks","tag-browserhacks","tag-chrome-specific-css","tag-css-coding-techniques-mozilla-hacks","tag-css-for-firefox-only","tag-css-for-mozilla-firefox","tag-css-for-mozilla-firefox-and-chrome","tag-css-hacks-for-firefox-37","tag-css-hacks-targeting-firefox","tag-css-hacks-targeting-ie","tag-firefox-css-themes","tag-firefox-media-query","tag-mozilla-css-extensions","tag-mozilla-firefox-css-compatibility","tag-target-ie-css","tag-targeting-css-hacks-for-mozilla-firefox","tag-targeting-firefox-only-with-css"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/2051","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=2051"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/2051\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=2051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=2051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=2051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}