how to load an external css file if javascript is disabled

Question

how to load an external css file if javascript is disabled.

Should work in IE 6 to 9, Firefox Google chrome, Safari

I tried <noscript> And keeping <noscript> inside but it's not working in IE 7

Answer 1

I'd do it the other way around. Always load the css which will contain rules prefixed with body.jsEnabled. Then simply add a class "jsEnabled" on body via javascript.

This way of "discovering capabilities" is approximately how http://www.modernizr.com/ works.

Answer 2

I've tested this method in IE7, and it works. Putting <style> tags (instead of a <link> within the <noscript>

<noscript>
<style type="text/css">
 @import url (yourexternalfile.css);

body{
background-color: purple;
}

</style>
</noscript>

EDIT:

Here's a screenshot of this working in IE7.