Question

I´m having a problem switching css when Javascript is disabled.

I have this code:

<style type="text/css">.nonjsonly{display:none;}.jsonly{display:inline;}</style>
<noscript><style type="text/css">.nonjsonly{display:inline}.jsonly{display:none}</style></noscript>

Witch is working right now, but W3C doesn´t approve it, as noscript is illegal in html head (And the code is in head).

Any idea how it can be made?

Thanks in advance

Answer 1

A more appropriate way to handle this is to place your non-js CSS first, without any <noscript> tag, followed by a script which loads a stylesheet for JavaScript-capable clients. The JS-capable css should then cascade to override the basic sheet.

<style type='text/css'>
  /* baseline CSS for all clients */
</style>

<!-- Then a script loads an additional stylesheet which cascades to override the baseline -->
<!-- Obviously, won't get loaded by noscript clients -->
<script type='text/javascript'>
  document.write("<link type='text/css' rel='stylesheet' href='/path/to/js-friendly.css' />");
</script>