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
Add a comment
|
5 Answers
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.
6 Comments
cherouvim
If you use jQuery then simply do
$(function(){$('body').addClass('jsEnabled');});
Jitendra Vyas
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.cherouvim
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.
Barka
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.
cherouvim
You need to apply the class as soon as possible. Also, do you use @import css?
|
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.
6 Comments
Yahel
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.
Jitendra Vyas
If i keep javascript off in IE7 it shows background showing purple. otherwise white.
Yahel
...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.
Jitendra Vyas
ok you mean @import works but <link> not for IE7, ok, I will check in other browsers. and will give + 1 for for this trick.
Yahel
Yeah, it looks like that's the case.
|
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.
1 Comment
codekipple
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.
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
Comments
CSS-Files have nothing to do with enabled/disabled javascript...
<link rel="stylesheet" type="text/css" href="my_external_css_file.css" />
3 Comments
cherouvim
I don't this this is what the OP asks. He wants to conditionally load css when js is disabled.
Spudley
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.
Jitendra Vyas
I want to change the look of page if javascript is disabled.