title: Better way of working with dynamic CSS Stylesheets; Special one for IE11, and other for other browsers
body: <p>I have been reading other answers but I think I have a particular context. Im working on a OLD legacy code web project. Originally, they used IE5, but currently they are using IE8. Now, they have decided to use IE11. The problem is that they want both versions coexistence. </p>
  
  <p>So, some features (related to scrollbars size and colors), need to be treated differently. For example, for <code>SELECT</code> elements, scroll arrows have to be in red on IE11, and white for other browsers.</p>
  
  <p>I have discard some possibilities of doing this; such as write new rules to each element, so that the css rule defined on the stylesheet is "overloaded".</p>
  
  <p>I would use conditional comments like this:</p>
  
  <pre><code>&lt;!--[if IE]&gt;
      This content is ignored in IE10 and other browsers.
      In older versions of IE it renders as part of the page.
    &lt;![endif]--&gt;
  </code></pre>
  
  <p>but it is no longer supported for IE>9 .</p>
  
  <p>So, the best option I know, is using JS. My idea is the following: </p>
  
  <pre><code>&lt;%if (request.getHeader("User-Agent")!=null &amp;&amp; request.getHeader("User-Agent").indexOf("rv:11.0") != -1) {
     cssSheetName = "special";
  }else {
     cssSheetName = "normal";
  }%&gt;
  </code></pre>
  
  <p>So this way then i can import the sheet correctly:</p>
  
  <pre><code>&lt;link rel="stylesheet"  href="&lt;%=CTXT%&gt;/css/&lt;%=cssSheetName%&gt;.css"&gt;
  </code></pre>
  
  <p><strong>Is this a correct way of doing it? or is it a dirty solution or a botched job? any other better way of doing this?</strong></p>
  
  <p>Tahnks in advance.  </p>