What's the best way to include CSS for JS-enabled browsers?

Question

What's the best practice way to include a CSS file in your HTML page on JS-enabled browsers only? I heard that using document.write is highly discouraged.

<head>
  <!-- Other head stuff here -->
  <script>document.write('<link rel="stylesheet" href="assets/stylesheets/layout_js-only.css">');</script>
</head>

CSS is supposed to be loaded before the , and the only way to do that dynamically is via document.write(). a plain DOM link tag addition to might be a little more philosophically cleaner JS-wise, but it will also be async, which can cause a FAUC. really the best way (balancing theory and real-world) is to hard-code any sheets you'll need as tags in the and then disable/un-disable certain ones via JS. — dandavis, May 23 '16 at 20:58

score 2 · Accepted Answer · edited May 23 '17 at 11:52

2

would a solution like this be what you are looking for: Use some CSS only if user has JavaScript enabled

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

edited May 23 '17 at 11:52

Community

1
1

answered May 23 '16 at 20:43

abigwonderful

1,267
10
10

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

Definitely don't use document.write. You can do the same work as document.write by creating new elements and appending them to the <head>.

var stylesheet = document.createElement('link');
stylesheet.rel = 'stylesheet';
stylesheet.href = 'assets/stylesheets/layout_js-only.css';
document.querySelector('head').appendChild(stylesheet);

I'd also suggest placing this code in the <body> to ensure the <head> is properly loaded.

edited May 23 '17 at 12:16

Community

1
1

answered May 23 '16 at 20:42

Mike Cluck

28,921
12
72
85

1

adding css from the body, and adding it async, are both ways of ensuring a FOUC... – dandavis May 23 '16 at 20:57
@dandavis True. Ideally you don't add CSS files dynamically but if you want to, this is a good way to do it. – Mike Cluck May 23 '16 at 21:00

What's the best way to include CSS for JS-enabled browsers?

2 Answers2