{"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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">&lt;!--[if IE 6]&gt;<br\/>...include IE6-specific stylesheet here...<br\/>&lt;![endif]--&gt;<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;!DOCTYPE html&gt;<br\/>&lt;html&gt;<br\/>&lt;head&gt;<br\/>&lt;style type=&quot;text\/css&quot;&gt;<br\/>@-moz-document url-prefix() {<br\/>    h1 {<br\/>        color: red;    }}<br\/>&lt;\/style&gt;<br\/>&lt;\/head&gt;<br\/>&lt;body&gt;<br\/>&lt;h1&gt;This should be red in FF&lt;\/h1&gt;<br\/>&lt;\/body&gt;<br\/>&lt;\/html&gt;<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">&lt;style type=&#039;text\/css&#039;&gt;<br\/>\/*This will work for chrome *\/<br\/>#categoryBackNextButtons<br\/>{    <br\/>width:490px;}<br\/>\/*This will work for firefox*\/<br\/>@-moz-document url-prefix() <br\/>{<br\/>    #categoryBackNextButtons<br\/>{<br\/>        width:486px;    }}<br\/>&lt;\/style&gt;<br\/>&lt;!--[if IE]&gt;<br\/>&lt;style type=&#039;text\/css&#039;&gt;<br\/>\/*This will work for IE*\/<br\/>#categoryBackNextButtons<br\/>{   <br\/> width:486px;<br\/>}<br\/>&lt;\/style&gt;<br\/>&lt;![endif]--&gt;<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">_:-moz-tree-row(hover), .selector {}<\/code><\/pre> <\/div>\n<h4 id=\"javascript-hacks\"><span style=\"color: #800080;\"><b>JavaScript Hacks<\/b><\/span><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">var isFF = !!window.sidebar;<br\/><br\/>var isFF = &#039;MozAppearance&#039; in document.documentElement.style;<br\/><br\/>var isFF = !!navigator.userAgent.match(\/firefox\/i);<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">@media screen and (-moz-images-in-menus:0) {}<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">html code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;style type=&quot;text\/css&quot;&gt;<br\/>    \/\/Other browsers<br\/>    color : black;<br\/>    \/\/Webkit (Chrome, Safari)<br\/>    @media screen and (-webkit-min-device-pixel-ratio:0) <br\/>{ <br\/>        color:green;    <br\/>}<br\/>    \/\/Firefox<br\/>    @media screen and (-moz-images-in-menus:0) <br\/>{<br\/>        color:orange;   <br\/> }<br\/>&lt;\/style&gt;<br\/>\/\/Internet Explorer<br\/>&lt;!--[if IE]&gt;<br\/>     &lt;style type=&#039;text\/css&#039;&gt;<br\/>        color:blue;<br\/>    &lt;\/style&gt;<br\/>&lt;![endif]--&gt;<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">body:not(:-moz-handler-blocked) h1 <br\/>{<br\/>    color: red;<br\/>  }<br\/>&lt;h1&gt;This should be red in FF&lt;\/h1&gt;<\/code><\/pre> <\/div>\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<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">html&gt;\/**\/body .selector, x:-moz-any-link <br\/>{<br\/>  color:lime;<br\/>}<\/code><\/pre> <\/div>\n<h4 id=\"firefox-3\"><strong><span style=\"color: #808000;\">Firefox 3 :<\/span><\/strong><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">html&gt;\/**\/body .selector, x:-moz-any-link, x:default <br\/>{<br\/>  color:lime;<br\/>}<\/code><\/pre> <\/div>\n<h4 id=\"any-firefox\"><span style=\"color: #800080;\"><b>Any Firefox :<\/b><\/span><\/h4>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">css code<\/span> <\/div> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">@-moz-document url-prefix() <br\/>{ <br\/>  .selector<br\/> {<br\/>     color:lime;  }}<\/code><\/pre> <\/div>\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: 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 [&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}]}}