title: Loading Browser Specific Style Sheets in Modern Browsers
body: <p>I really need some help here.  I have searched the forum and the internet for hours.  I have found many articles but they either have no definitive working answers on how to do this or they are too old.</p>
  
  <p>I have 2 stylesheets.  One for IE and one for all other browsers.  This is not ideal I know but this was a complicated project and it is the way things developed.  One sheet is 3D (webkit) and the other is 2D (IE).  I need to be able to load the CSS based on the browser.  I only need the 2 options, IE an other.</p>
  
  <p>I have tried conditional statements and I have tried browser detection.  Must work for modern browsers.</p>
  
  <p>I have tried the following in the head and nothing has worked.  The webkit CSS either overrides the IE CSS or it doesn't load at all.  Please assist.</p>
  
  <p>Attempt 1 (problem - webkit css overrides IE CSS even though it is commented):</p>
  
  <pre><code>&lt;!--[if !IE]&gt;&lt;!--&gt;   
  
  &lt;link rel="stylesheet" type="text/css" href="http://secure.cart32.com/WarrenKahn/SolarWebkit.css" /&gt;
  
  &lt;!--&lt;![endif]--&gt;
  
  &lt;!--[if gte IE 9]&gt;&lt;!--&gt;   
  
    &lt;link rel="stylesheet" type="text/css" href="http://secure.cart32.com/WarrenKahn/SolarIE.css" /&gt;
  
  &lt;!--&lt;![endif]--&gt;
  
  &lt;!--[if lte IE 9]&gt;&lt;!--&gt;   
  
    &lt;link rel="stylesheet" type="text/css" href="http://secure.cart32.com/WarrenKahn/SolarIE.css" /&gt;
  
  &lt;!--&lt;![endif]--&gt;
  </code></pre>
  
  <p>Attempt 2 (problem - won't load at all in any browser):</p>
  
  <pre><code>var nAgt = navigator.userAgent;
  var browserName  = navigator.appName;
  var nameOffset,verOffset,ix;
  
  // In Opera, the true version is after "Opera" or after "Version"
  if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
   browserName = "Opera";
  }
  // In MSIE, the true version is after "MSIE" in userAgent
  else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
   browserName = "Microsoft Internet Explorer";
  }
  // In Chrome, the true version is after "Chrome" 
  else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
   browserName = "Chrome";
  }
  // In Safari, the true version is after "Safari" or after "Version" 
  else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
   browserName = "Safari";
  }
  // In Firefox, the true version is after "Firefox" 
  else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
   browserName = "Firefox";
  }
  // In most other browsers, "name/version" is at the end of userAgent 
  else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) &lt; 
            (verOffset=nAgt.lastIndexOf('/')) ) 
  {
   browserName = nAgt.substring(nameOffset,verOffset);
   fullVersion = nAgt.substring(verOffset+1);
   if (browserName.toLowerCase()==browserName.toUpperCase()) {
    browserName = navigator.appName;
   }
  }
  
   if (browserName == "Microsoft Internet Explorer") {
   document.write("&lt;link type=\"text/css\" rel=\"stylesheet\" href=\"http://secure.cart32.com/WarrenKahn/SolarIE.css"&gt;");
   }
   else {
   document.write("&lt;link type=\"text/css\" rel=\"stylesheet\" href=\"http://secure.cart32.com/WarrenKahn/SolarWebkit.css"&gt;");
   }
  </code></pre>
  
  <p>I made other attempts but these seemed like the most valid.  Any working solutions are welcome.  Thanks in advance.</p>