title: Browser detection for CSS: Use separate CSS files or inline CSS or...?
body: <p>I'm wondering which is best for speed:</p>
  
  <p>Option 1: Loading separate CSS for each browser (separate JS file included through a <code>&lt;script/&gt;</code>):</p>
  
  <pre><code>// for internet explorer 6 &amp; 7
  if ($.browser.msie) {
      document.write('&lt;link rel="stylesheet" type="text/css" href="/css/styles-ie.css" /&gt;');
  }
  
  // for opera
  if ($.browser.opera) {
      document.write('&lt;link rel="stylesheet" type="text/css" href="/css/styles-opera.css" /&gt;');
  }
  </code></pre>
  
  <p>Option 2: Inline CSS (separate JS file included through a <code>&lt;script/&gt;</code>):</p>
  
  <pre><code>// for internet explorer 6 &amp; 7
  if ($.browser.msie) {
      document.write('[some CSS styles]');
  }
  
  // for opera
  if ($.browser.opera) {
      document.write('[some CSS styles]');
  }
  </code></pre>
  
  <p>Option 3: Or is there another better way?</p>