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
– CassOnMars, Commented Jul 21, 2011 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
– shanethehat, Commented Jul 21, 2011 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
– edeverett, Commented Jul 21, 2011 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
– Jon Cox, Commented Jul 21, 2011 at 16:48

edeverett · Accepted Answer · 2011-07-21 16:27:21Z

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, 2011 at 16:27

edeverett

8,2481 gold badge35 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Michael Berkowski Over a year ago

+1 I would definitely use this before my document.write() suggestion

aepheus Over a year ago

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.

Jon Cox Over a year ago

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.

Michael Berkowski · Accepted Answer · 2011-07-21 16:27:16Z

5

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>

answered Jul 21, 2011 at 16:27

Michael Berkowski

271k47 gold badges450 silver badges395 bronze badges

Comments

Peter Mortensen · Accepted Answer · 2011-10-02 18:25:15Z

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 2, 2011 at 18:25

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Jul 21, 2011 at 16:30

Emil

8,5373 gold badges29 silver badges44 bronze badges

Comments

Amy Groshek · Accepted Answer · 2011-07-21 16:29:31Z

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, 2011 at 16:29

Amy Groshek

8288 silver badges23 bronze badges

Comments

simPod · Accepted Answer · 2014-05-07 20:39:40Z

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 7, 2014 at 20:39

simPod

13.8k18 gold badges98 silver badges148 bronze badges

Collectives™ on Stack Overflow

Use some CSS only if user has JavaScript enabled

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related