title: Alternate stylesheets not working in Chrome
body: <p>I need some help diagnosing a CSS problem in Chrome.   I'm not even sure how to diagnose this issue.   I'm just wondering what the next steps should be.</p>
  
  <p>As far as solutions go, I have checked <a href="https://stackoverflow.com/questions/12825248/enable-disable-stylesheet-using-javascript-in-chrome">this question</a> but it's not very clear.  I have also tried <a href="https://stackoverflow.com/questions/26686291/alternate-stylesheets-dont-work-unless-i-disable-all-of-them-first">this solution</a> (disabling all styles and then enabling one) but it's not working.   I don't think <a href="https://stackoverflow.com/questions/24472352/external-css-styles-cant-be-accessed-in-google-chrome">this question</a> applies because we're not pulling from external domains so it's not a cross-domain issue.</p>
  
  <p>The problem:  </p>
  
  <p>It appears that Chrome is ignoring our alternate stylesheet definitions.   In our application we use alternate stylesheets and a Javascript routine to change the background color.   This code <strong>was working</strong>, and is <strong>still working</strong> in Firefox and IE, but at some point it stopped working in Chrome.   The stylesheets are defined like this:</p>
  
  <pre><code>    &lt;link type="text/css" rel="stylesheet" title="white" property="stylesheet" href="/myapp/css/layer.css" /&gt;
      &lt;link type="text/css" rel="alternate stylesheet" title="silver" property="stylesheet" href="/myapp/css/medium.css" /&gt;
      &lt;link type="text/css" rel="alternate stylesheet" title="grey" property="stylesheet" href="/myapp/css/dark.css" /&gt;
      &lt;link type="text/css" rel="alternate stylesheet" title="beige" property="stylesheet" href="/myapp/css/beige.css" /&gt;
      &lt;link type="text/css" rel="alternate stylesheet" title="green" property="stylesheet" href="/myapp/css/green.css" /&gt;
  </code></pre>
  
  <p>The original body definition here:</p>
  
  <pre><code>body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      color: #282828;
      height: 100%;
      background: #fff url(../images/header-bg.jpg) center top no-repeat;
      min-width: 1024px;
  }
  </code></pre>
  
  <p>is supposed to be overridden with (for example) this, in one of the alternate stylesheets:</p>
  
  <pre><code>body {
      background: url("../images/header-bg-dark.jpg") no-repeat center top #919194;
  }
  </code></pre>
  
  <p>But this is not working in Chrome.  I've tried the following:</p>
  
  <p>1) Traced through the JS code and verified that the CSS sheets are getting enabled/disabled correctly:</p>
  
  <pre><code>        if (document.styleSheets.item(i).href.indexOf("medium") &gt; -1) {
              document.styleSheets.item(i).disabled = false;
          } else if (document.styleSheets.item(i).href.indexOf("dark") &gt; -1
                  || document.styleSheets.item(i).href.indexOf("beige") &gt; -1
                  || document.styleSheets.item(i).href.indexOf("green") &gt; -1) {
              document.styleSheets.item(i).disabled = true;
          }
  </code></pre>
  
  <p>2) Looked at the computed styles, and only the base style is showing - it's like Chrome is ignoring the other styles.</p>
  
  <p>3) Tried removing <code>alternate</code> from the <code>rel="alternate stylesheet"</code> part of the definitions.</p>
  
  <p>4) Tried removing the <code>title</code> from the base definition (layer.css).</p>
  
  <p>Anyone have any other ideas?   If I find a solution I'll post it.</p>