Search code examples
cssfirefoxmozilla

Add a CSS class name to HTML tag for Firefox versions less than 35

I'm on the hunt for a bulletproof workflow for select menus. I have conditional comments for ie 10+

<!--[if lt IE 7]>  <html class="ie ie6 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 7]>     <html class="ie ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8]>     <html class="ie ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9]>     <html class="ie ie9 lte9"> <![endif]-->
<!--[if gt IE 9]>  <html class="gt9"> <![endif]-->
<!--[if !IE]><!--> <html>             <!--<![endif]-->

And Chrome does just fine when it comes to hiding/showing select arrows with:

-webkit-appearance: none;

However when it comes to Firefox:

-moz-appearance:none;

Works for versions 35+. This means that FF<35 will display both my custom background-image arrow and its default on select menus. So hiding the dropdown arrow for these legacy browsers is the final hurdle to a cross browser solution.

How do I target background-image for Firefox browsers older than version 35? I know modernizer or other libraries may be able to do so but that's overkill to add a class name to < html> or a vendor specific pseudo element I don't know about. Thanks in advance.

Solution

  • You could use JavaScript to detect the version.

    var frags = navigator.userAgent.split('/');

if ((frags[frags.length - 2].indexOf('Firefox') > -1) && (parseFloat(frags[frags.length - 1]) < 35)) {
  alert('You are on Firefox version < 35')
}