Avoid loading a CSS resource when JS is enabled without use of <noscript>
<p>This question may sound familiar but not quite the same as asked before.</p>

<p>I have a CSS that is sent to browsers with no javascript functionality (referenced by a link tag). I have another CSS which is used by the ajax version of the site and is injected to the page by JS. Each of these files are relatively big (gt 200K). <strong>I don't want the JS enabled clients to download both files.</strong>
I can do this easily using noscript tag. But that has the limitation in cases where the user is behind a proxy that filters script tags. So the browser ends up with no CSS altogether.</p>



<pre class="lang-html prettyprint-override"><code>&lt;html&gt;
&lt;head&gt;
&lt;noscript&gt;&lt;link rel="stylesheet" type="text/css" href="nojs.css" /&gt;&lt;/noscript&gt;
&lt;script&gt;
document.write('&lt;link rel="stylesheet" type="text/css" href="js.css" /&gt;');
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>My attempt to use HTML comments in a non-standard way worked in Chrome but failed in FF:</p>

<pre class="lang-html prettyprint-override"><code>&lt;html&gt;
&lt;head&gt;
&lt;script&gt;
document.write('&lt;link rel="stylesheet" type="text/css" href="js.css" /&gt;');
document.write('&lt;!----');
&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" href="nojs.css" /&gt;&lt;!-- --&gt;
&lt;/head&gt;
&lt;body&gt;&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Both browsers parse the HTML correctly (not sure if IE and Opera would too), but FF downloads the nojs.css in all cases (without actually applying it when JS is enabled).</p>

<p>Any ideas?</p>
