IE conditional targeting with ReactJS

Question

I'm writing a web application using ReactJS, and I have a need to target specifically IE9 and below browsers to exclude a class from being applied. Specifically, my client has a custom <select> control that they want to use, and on their main website (which doesn't use React) they use conditional comments to target IE9- to not apply the custom <select> styles. The problem is that with ReactJS, there is no way to do IE conditional comments. I've done a bit of google-foo, and the best solution I can find is to inject the HTML directly into the DOM rather than allow React to handle the render.

<div>
    <!--[if lte IE 9]>
    <select>
    <![endif] -->
    <!--[if !IE]> -->
    <select className = "customSelect">
    <!-- <![endif] -->
        <!-- OPTIONS GO HERE -->
    </select>
</div>

Is there a way to emulate this in CSS only, or has anyone heard of a react plugin that would allow me to do IE conditional checks?

jsFiddle for example here

Answer 1

Other options:

• Use conditional compilation to write code which will only run in IE (< 11)
• Use feature detection to detect IE and its version

Conditional compilation can easily bite you if comments are stripped during your build process, so feature detection might be less painful in the long run:

var ie = require('ie-version')
...
var className = 'customSelect'
if (ie.version && ie.version <= 9) {
  className = ''
}
return <div>
  <select className={className}>
  ...
  </select>
</div>