current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free.
up vote 5 down vote favorite
5

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

share|improve this question

5 Answers 5

up vote 11 down vote accepted

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.

share|improve this answer
    
+1 pls can you provide any link on how to do this –  Jitendra Vyas Sep 29 '10 at 13:19
    
If you use jQuery then simply do $(function(){$('body').addClass('jsEnabled');}); –  cherouvim Sep 29 '10 at 13:21
    
I want to load the css <link rel="stylesheet" type="text/css" href="non-js.css"> only if javascript is disabled and want to keep this css after all other css files. –  Jitendra Vyas Sep 29 '10 at 13:24
    
What you are trying to achieve may not be possible, but only emulated by the method I'm describing. Of course, a better solution may exist. –  cherouvim Sep 29 '10 at 13:26
    
I tried this method and I get the page rendered first with the default css (JavaScript off) and then the jsEnabled is applied. The result is a big flicker on load for JavaScript enabled clients which looks bad. –  user277498 Oct 29 '12 at 5:19
up vote 8 down vote

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. alt text

share|improve this answer
    
It's not working on IE7 –  Jitendra Vyas Sep 29 '10 at 13:41
    
Strange. It's both @import and inline CSS are registering properly for me. Try opening htmlto.com/page.html with JavaScript disabled. Is the background purple and the text styled in small-caps for you? It is for me. –  Yahel Sep 29 '10 at 13:47
    
See my edit with screenshot. –  Yahel Sep 29 '10 at 13:57
    
If i keep javascript off in IE7 it shows background showing purple. otherwise white. –  Jitendra Vyas Sep 29 '10 at 14:08
    
...That's the point. The purple style is applied within the noscript tag; same with the small-caps on the h2 tags. On that page, all of the styles are loading within noscript tags, to prove that it works. (The page is unstyled when JS is enabled.) In your case, you can use @import url('your-no-js-css') to load CSS only when JS is disabled. –  Yahel Sep 29 '10 at 14:20
up vote 2 down vote

Try this:

<html>
  <head>
    <script type="text/javascript"> document.write('<'+'!--'); </script>
       <link rel="stylesheet" type="text/css" href="non-js.css">
    <!-- -->  
  </head>
  <body>
      <script type="text/javascript"> document.write('<'+'!--'); </script>
       Visible when no-JS 
      <!--  --> Always visible
  </body>
</html>

Hack, but it is correct with HTML. If JS is enabled then comment start control tag is printed into page - then second start tag is ignored and ending tag closes commented content. So if JS is enabled link tag will be commented out and not downloaded at all.

share|improve this answer
    
+1 for this extreme hack, I wouldn't use it though. –  cherouvim Sep 29 '10 at 17:45
    
I'm tempted to use this, it's the only method that has worked in my case. I want to load some custom fonts via external stylesheets if js is not enabled. If js is enabled instead i want to load the fonts via typekits webfont loader so i can fire off js events after the fonts have loaded. –  codekipple Nov 6 '14 at 9:59
up vote 1 down vote

while <noscript> is not allowed in <head>, and <link> + <style> are only allowed in <head> , you also could use this:

<link id="noscriptStyle" rel="stylesheet" type="text/css" href="my_external_css_file.css" />
<script type="text/javascript">
document.getElementById('noscriptStyle').parentNode.removeChild(document.getElementById('noscriptStyle'));
</script>

But by myself I would prefer the method posted by cherouvim

share|improve this answer
    
not working, at least not in Chrome 28 –  frnhr Aug 4 '13 at 19:12
up vote 0 down vote

CSS-Files have nothing to do with enabled/disabled javascript...

<link rel="stylesheet" type="text/css" href="my_external_css_file.css" />
share|improve this answer
1  
I don't this this is what the OP asks. He wants to conditionally load css when js is disabled. –  cherouvim Sep 29 '10 at 13:18
    
The question is ambiguious, but I the way I read it, what he wants is to include a specific CSS file for users without Javascript. –  Spudley Sep 29 '10 at 13:20
    
I want to change the look of page if javascript is disabled. –  Jitendra Vyas Sep 29 '10 at 13:21
    
AH okay, now I got the question - Sorry so far... –  faileN Oct 1 '10 at 10:36

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.