Javascript css switching disabled

Question

I have a problem with 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> 

The witch is working right now, but the W3C does not approve of it, since noscript is illegal in the html head (and the code in the head).

Any idea how this can be done?

Thank you in advance

Answer 1

A more appropriate way to handle this is to first place non-js CSS without the <noscript> , followed by a script that loads the stylesheet for clients that support JavaScript. JSS-compliant css must then be cascaded to override the main 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> 

Answer 2

First put css by default:

 <style type="text/css" src="default.css" /> 

therefore, non-JS styles apply to everyone. Then use some JS to dynamically load styles with js support:

 <script type="text/javascript"> css = document.createElement('link'); css.setAttribute('rel', 'stylsheet'); css.setAttribute('type', 'text/css'); css.setAttribute('href', 'js-styles.css'); // change as needed document.getElementsByTagName('head')[0].appendChild(css); </script> 

which will override non-js styles.

Answer 3

you can do something like this

 <script> document.getElementsByTagName('body')[0].className += ' jsActive'; </script> 

so that the script writes the "jsActive" class to the Body element, if Javascript is available. You do not have the class "noJavascipt", but you can select using CSS and build you Funcitons

Answer 4

• Use 1 style sheet
• Add .js to html element via JavaScript
• For styles that require JavaScript, your .js selector prefix

Example:

 #foo 

becomes

 .js #foo 

Even better, use Modernizr to detect more complex features (it will automatically add .js too).