{"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=&#8221;css&#8221; manual=&#8221;%3C!&#8211;%5Bif%20IE%206%5D%3E%0A&#8230;include%20IE6-specific%20stylesheet%20here&#8230;%0A%3C!%5Bendif%5D&#8211;%3E%0A&#8221; message=&#8221;css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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=&#8221;markup&#8221; manual=&#8221;%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&#8221; message=&#8221;html code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<ul>\n<li>It&#8217;s 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=&#8221;css&#8221; manual=&#8221;%3Cstyle%20type%3D&#8217;text%2Fcss&#8217;%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!&#8211;%5Bif%20IE%5D%3E%0A%3Cstyle%20type%3D&#8217;text%2Fcss&#8217;%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&#8211;%3E%0A&#8221; message=&#8221;css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n[ad type=&#8221;banner&#8221;]\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=&#8221;css&#8221; manual=&#8221;_%3A-moz-tree-row(hover)%2C%20.selector%20%7B%7D&#8221; message=&#8221;css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<h4 id=\"javascript-hacks\"><span style=\"color: #800080;\"><b>JavaScript Hacks<\/b><\/span><\/h4>\n[pastacode lang=&#8221;css&#8221; manual=&#8221;var%20isFF%20%3D%20!!window.sidebar%3B%0A%0Avar%20isFF%20%3D%20&#8217;MozAppearance&#8217;%20in%20document.documentElement.style%3B%0A%0Avar%20isFF%20%3D%20!!navigator.userAgent.match(%2Ffirefox%2Fi)%3B%0A&#8221; message=&#8221;css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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=&#8221;css&#8221; manual=&#8221;%40media%20screen%20and%20(-moz-images-in-menus%3A0)%20%7B%7D%0A&#8221; message=&#8221;css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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=&#8221;markup&#8221; manual=&#8221;%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!&#8211;%5Bif%20IE%5D%3E%0A%20%20%20%20%20%3Cstyle%20type%3D&#8217;text%2Fcss&#8217;%3E%0A%20%20%20%20%20%20%20%20color%3Ablue%3B%0A%20%20%20%20%3C%2Fstyle%3E%0A%3C!%5Bendif%5D&#8211;%3E%0A&#8221; message=&#8221;html code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n[ad type=&#8221;banner&#8221;]\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=&#8221;css&#8221; manual=&#8221;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&#8221; message=&#8221;css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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=&#8221;css&#8221; manual=&#8221;html%3E%2F**%2Fbody%20.selector%2C%20x%3A-moz-any-link%20%0A%7B%0A%20%20color%3Alime%3B%0A%7D%0A&#8221; message=&#8221;css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<h4 id=\"firefox-3\"><strong><span style=\"color: #808000;\">Firefox 3 :<\/span><\/strong><\/h4>\n[pastacode lang=&#8221;css&#8221; manual=&#8221;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&#8221; message=&#8221;css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\n<h4 id=\"any-firefox\"><span style=\"color: #800080;\"><b>Any Firefox :<\/b><\/span><\/h4>\n[pastacode lang=&#8221;css&#8221; manual=&#8221;%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&#8221; message=&#8221;css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/]\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=&#8221;banner&#8221;]\n","protected":false},"excerpt":{"rendered":"<p>PROBLEM: Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules: [pastacode lang=&#8221;css&#8221; manual=&#8221;%3C!&#8211;%5Bif%20IE%206%5D%3E%0A&#8230;include%20IE6-specific%20stylesheet%20here&#8230;%0A%3C!%5Bendif%5D&#8211;%3E%0A&#8221; message=&#8221;css code&#8221; highlight=&#8221;&#8221; provider=&#8221;manual&#8221;\/] 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}]}}