Home/ Questions/Q 6994261
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T19:52:11+00:00

This question may sound familiar but not quite the same as asked before. I

  • 0

This question may sound familiar but not quite the same as asked before.

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). I don’t want the JS enabled clients to download both files.
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.

<html>
<head>
<noscript><link rel="stylesheet" type="text/css" href="nojs.css" /></noscript>
<script>
document.write('<link rel="stylesheet" type="text/css" href="js.css" />');
</script>
</head>
<body></body>
</html>

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

<html>
<head>
<script>
document.write('<link rel="stylesheet" type="text/css" href="js.css" />');
document.write('<!----');
</script>
<link rel="stylesheet" type="text/css" href="nojs.css" /><!-- -->
</head>
<body></body>
</html>

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).

Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The prefetching mechanism of Firefox seems to ignore the comment and preloads the CSS file, but only if it’s referenced as a link element.

    Use a CSS import statement instead to suppress prefetching of the unused file:

    <html>
  <head>
    <script>
      document.write('<link rel="stylesheet" type="text/css" href="js.css" />');
      document.write('<!--');
    </script>
    <style>
      @import url(nojs.css)
    </style>
    <!-- -->
  </head>
<body>
...
    • 0