Targeting only Firefox with CSS

Question

Using conditional comments it is easy to target Internet Explorer with browser-specific CSS rules    lt  -- if IE 6  gt     include IE6-specific stylesheet here     lt   endif -- gt    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   Note  I m looking for a  clean  solution  Using a JavaScript browser sniffer to add a  firefox  class to my HTML does not qualify as clean in my opinion  I would rather like to see something that depends on browser capabilities  much like conditional comments are only  special  to IE

User · Answer

Here is how to tackle three different browsers  IE  FF and Chrome   lt style type  text css  gt    This will work for chrome     categoryBackNextButtons       width 490px      This will work for firefox    -moz-document url-prefix          categoryBackNextButtons          width 486px           lt  style gt   lt  -- if IE  gt   lt style type  text css  gt    This will work for IE    categoryBackNextButtons       width 486px     lt  style gt   lt   endif -- gt

User · Answer

CSS support has binding to javascript  as a side note    x000D   x000D  if  CSS supports    -moz-user-select unset        x000D      console log  FIREFOX      x000D    x000D   x000D   x000D    https   developer mozilla org en-US docs Web CSS Mozilla Extensions

User · Answer

Here is some browser hacks for targeting only the Firefox browser   Using selector hacks     -moz-tree-row hover    selector      JavaScript Hacks  var isFF     window sidebar   var isFF    MozAppearance  in document documentElement style   var isFF     navigator userAgent match  firefox i     Media Query Hacks  This is gonna work on  Firefox 3 6 and Later   media screen and  -moz-images-in-menus 0       If you need more information Please visit browserhacks

User · Answer

First of all  a disclaimer  I don t really advocate for the solution I present below  The only browser specific CSS I write is for IE  especially IE6   although I wish it wasn t the case   Now  the solution  You asked it to be elegant so I don t know how elegant is it but it s sure going to target Gecko platforms only   The trick is only working when JavaScript is enabled and makes use of Mozilla bindings  XBL   which are heavily used internally in Firefox and all other Gecko-based products  For a comparison  this is like the behavior CSS property in IE  but much more powerful   Three files are involved in my solution    ff html  the file to style ff xml  the file containg the Gecko bindings ff css  Firefox specific styling   ff html   lt  DOCTYPE html gt    lt html gt   lt head gt   lt style type  text css  gt  body    -moz-binding  url ff xml load-mozilla-css      lt  style gt   lt  head gt   lt body gt    lt h1 gt This should be red in FF lt  h1 gt    lt  body gt   lt  html gt    ff xml   lt  xml version  1 0   gt    lt bindings xmlns  http   www mozilla org xbl  gt       lt binding id  load-mozilla-css  gt           lt implementation gt               lt constructor gt               lt   CDATA                  var link   document createElement  link                        link setAttribute  rel    stylesheet                        link setAttribute  type    text css                        link setAttribute  href    ff css                     document getElementsByTagName  head   0                           appendChild link                  gt               lt  constructor gt           lt  implementation gt       lt  binding gt   lt  bindings gt    ff css  h1    color  red      Update  The above solution is not that good  It would be better if instead of appending a new LINK element it will add that  firefox  class on the BODY element  And it s possible  just by replacing the above JS with the following   this className      firefox     The solution is inspired by Dean Edwards  moz-behaviors

User · Answer

Now that Firefox Quantum 57 is out with substantial     and potentially breaking     improvements to Gecko collectively known as Stylo or Quantum CSS  you may find yourself in a situation where you have to distinguish between legacy versions of Firefox and Firefox Quantum   From my answer here      You can use  supports with a calc 0s  expression in conjunction with  -moz-document to test for Stylo     Gecko does not support time values in calc   expressions but Stylo does        -moz-document url-prefix        supports  animation  calc 0s            Stylo                Here s a proof-of-concept        x000D   x000D  body  before   x000D    content   Not Fx   x000D    x000D   x000D   -moz-document url-prefix     x000D    body  before   x000D      content   Fx legacy   x000D      x000D   x000D     supports  animation  calc 0s     x000D      body  before   x000D        content   Fx Quantum   x000D        x000D      x000D    x000D   x000D   x000D        Targeting legacy versions of Firefox is a little tricky     if you re only interested in versions that support  supports  which is Fx 22 and up   supports not  animation  calc 0s   is all you need        -moz-document url-prefix        supports not  animation  calc 0s            Gecko                    but if you need to support even older versions  you ll need to make use of the cascade  as demonstrated in the proof-of-concept above

User · Answer

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

User · Answer

Updated from  Antoine comment   You can use  supports   x000D   x000D   supports  -moz-appearance none    x000D      h1   color red     x000D    x000D   lt h1 gt This should be red in FF lt  h1 gt  x000D   x000D   x000D    More on  supports here

User · Answer

Using -engine specific rules ensures effective browser targeting    lt style type  text css  gt         Other browsers     color   black          Webkit  Chrome  Safari       media screen and  -webkit-min-device-pixel-ratio 0             color green               Firefox      media screen and  -moz-images-in-menus 0            color orange         lt  style gt     Internet Explorer  lt  -- if IE  gt        lt style type  text css  gt          color blue       lt  style gt   lt   endif -- gt

User · Answer

OK  I ve found it  This is probably the cleanest and easiest solution out there and does not rely on JavaScript being turned on   x000D   x000D   -moz-document url-prefix       h1       color  red        x000D   lt h1 gt This should be red in FF lt  h1 gt  x000D   x000D   x000D   It s based on yet another Mozilla specific CSS extension  There s a whole list for these CSS extensions right here  Mozilla CSS Extensions

User · Answer

A variation on your idea is to have a server-side USER-AGENT detector that will figure out what style sheet to attach to the page   This way you can have a firefox css  ie css  opera css  etc   You can accomplish a similar thing in Javascript itself  although you may not regard it as clean   I have done a similar thing by having a default css which includes all common styles and then specific style sheets are added to override  or enhance the defaults

User · Answer

The following code tends to throw Style lint warnings    -moz-document url-prefix         h1           color  red            Instead using    -moz-document url-prefix           h1           color  red            Helped me out  Got the solution for style lint warning from here

[css] Targeting only Firefox with CSS

Examples related to css

Examples related to firefox

Examples related to css-hack