Geek Answers Handbook

How to load external css file if javascript is disabled

how to load external css file if javascript is disabled.

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

I tried <noscript> and supported <noscript> internally, but didn't work in IE 7

+7
javascript jquery css xhtml
source share
5 answers

I would do it the other way around. Always download css that will contain the rules with the prefix body.jsEnabled . Then just add the class "jsEnabled" to the body through javascript.

This method of "detection capabilities" is approximately equal to http://www.modernizr.com/ .

+13
source share

I tested this method in IE7 and it works. Put <style> tags (instead of <link> in <noscript>

 <noscript> <style type="text/css"> @import url (yourexternalfile.css); body{ background-color: purple; } </style> </noscript>

EDIT:

Here is a screenshot of this work in IE7. alt text

+9
source share

Try the following:

 <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 the comment start control tag is printed on the page - then the second start tag is ignored, and the end tag closes the commented content. Therefore, if JS is enabled, the link tag will be commented out and will not be loaded at all.

+3
source share

and <noscript> not allowed in <head> , and <link> + <style> allowed only in <head> , you can also 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 I myself would prefer the method posted by cherouvim

+1
source share

CSS files have nothing to do with javascript enabled / disabled ...

 <link rel="stylesheet" type="text/css" href="my_external_css_file.css" />
0
source share

More articles:


All Articles