1

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.

Ben Racicot
  • 5,332
  • 12
  • 66
  • 130
  • You need to use javascript then.. – Bhojendra Rauniyar Jan 15 '15 at 17:08
  • You don't need to use a lib like modernizer you can just write a few lines of js code to check the FF version. http://stackoverflow.com/questions/5916900/how-can-you-detect-the-version-of-a-browser You don't need all of it since you only need to check for FF – Huangism Jan 15 '15 at 17:10
  • You can create a custom build of Modernizer to test for specific set of features, doesn't have to be the whole gamut: http://stackoverflow.com/questions/13615963/detecting-for-webkit-apperance-with-modernizr#answer-17742395 – hungerstar Jan 15 '15 at 17:33

1 Answers1

2

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')
}
Weafs.py
  • 22,731
  • 9
  • 56
  • 78