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
views:
115answers:
5
A:
CSS-Files have nothing to do with enabled/disabled javascript...
<link rel="stylesheet" type="text/css" href="my_external_css_file.css" />
faileN
2010-09-29 13:17:25
I don't this this is what the OP asks. He wants to conditionally load css when js is disabled.
cherouvim
2010-09-29 13:18:37
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
2010-09-29 13:20:45
I want to change the look of page if javascript is disabled.
metal-gear-solid
2010-09-29 13:21:39
AH okay, now I got the question - Sorry so far...
faileN
2010-10-01 10:36:26
+7
A:
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.
cherouvim
2010-09-29 13:17:36
If you use jQuery then simply do `$(function(){$('body').addClass('jsEnabled');});`
cherouvim
2010-09-29 13:21:13
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.
metal-gear-solid
2010-09-29 13:24:05
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
2010-09-29 13:26:45
+1
A:
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.
yc
2010-09-29 13:32:22
Strange. It's both @import and inline CSS are registering properly for me. Try opening http://htmlto.com/page.html with JavaScript disabled. Is the background purple and the text styled in small-caps for you? It is for me.
yc
2010-09-29 13:47:38
If i keep javascript off in IE7 it shows background showing purple. otherwise white.
metal-gear-solid
2010-09-29 14:08:34
...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.
yc
2010-09-29 14:20:53
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.
metal-gear-solid
2010-09-29 14:39:34
+1
A:
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.
gertas
2010-09-29 13:37:16
+1
A:
Hi,
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
Dr.Molle
2010-09-29 13:54:18