Use some CSS only if user has JavaScript enabled

Question

In order for my webpage to degrade gracefully, I have some CSS that should only be loaded if its corresponding JavaScript will function.

What is the simplest way to load local CSS if and only if the browser has JavaScript enabled?

Also it's quite a big block of CSS, so I'd rather not have to write a JavaScript line to add each attribute. (Oh, and if necessary I can use jQuery).

I don't mean to be pedantic, but if your CSS is relying on javascript to look correct, it's not really separating presentation from content. — CassOnMars, Jul 21 '11 at 16:26
Maybe he means that it's CSS for elements that will only be present if JavaScript is enabled, like enhanced UI components. — shanethehat, Jul 21 '11 at 16:28
@d_r_w I do mean to be pedantic - the CSS doesn't look correct, the HTML does when it is styled by the information stored in the CSS stylesheets. As long as that information is in the stylesheets then it is separated. JS can change the state of the HTML, in which case the new HTML should rely on the CSS to tell it how to look. This is separating the concerns. (All abstractions leak). — edeverett, Jul 21 '11 at 16:31
I needed the page to be presented differently if javascript didn't work - same content, but different way of view it essentially. (I've expressed that in a way that I'm sure makes perfect sense :P ) — Jon Cox, Jul 21 '11 at 16:48

score 9 · Accepted Answer · answered Jul 21 '11 at 16:27

9

Set a class on the body tag of "noJS". Then use Javascript to remove that class.

For the CSS rules that you want to be used when no JS is present, just use .noJS .myRules {}

answered Jul 21 '11 at 16:27

edeverett

8,012
33
28

2

+1 I would definitely use this before my `document.write()` suggestion – Michael Berkowski Jul 21 '11 at 16:30
This is how I would do it, you can then load the css when you should (first thing on the page), and execute the javascript right after (only the part that adds the class to the body). Everything will load nicely. – aepheus Jul 21 '11 at 16:30
Thanks, that was a very simple fix in the end :) - although I've actually gone with adding a js class, but it's the same difference. – Jon Cox Jul 21 '11 at 16:45
Quite elegant. Thanks! – Alexandre Bourlier May 22 '14 at 18:48

score 5 · Answer 2 · answered Jul 21 '11 at 16:27

In the <head> you can include it with document.write(). I've never tried this, but it should work in theory. No script execution means no stylesheet loaded.

<head>
  <script type='text/javascript>
   document.write("<link rel='stylesheet' href='your.css' media='whatever />");
  </script>
</head>

score 3 · Answer 3 · edited Oct 02 '11 at 18:25

3

You have a few options.

The one I like is to add the following code to the body tag.

<body id="no-js"><script>document.body.id="js"</script>

Then I can target #no-js and #js from my master CSS.

An additional option is to load an extra stylesheet with JavaScript, but that will slow down you initial load, which I try to avoid.

edited Oct 02 '11 at 18:25

Peter Mortensen

30,738
21
105
131

answered Jul 21 '11 at 16:30

Emil

8,449
3
27
44

score 2 · Answer 4 · answered Jul 21 '11 at 16:29

2

Check out the body conditionals for html5 boilerplate to see how to employ modernizr.

Also good example here: http://webdesignernotebook.com/css/how-to-use-modernizr/

Then write your css selectors for .no-js .addl-selector {}

answered Jul 21 '11 at 16:29

Lou Groshek

718
6
23

score 1 · Answer 5 · answered May 07 '14 at 20:39

1

I simply do this:

document.documentElement.className = "js"

This adds class js to <html> tag, then you can target your elements by css using:

.js #someid{}

answered May 07 '14 at 20:39

simPod

11,498
17
86
139

Use some CSS only if user has JavaScript enabled

5 Answers5

Linked