How to use a different CSS stylesheet if a user has JavaScript disabled in their browser?

Question

I am developing a website for someone, and the CSS styles I use require JavaScript (for the buttons that are used for a dropdown navigation bar on small screens). How can I use one stylesheet if the user has JavaScript enabled or use another one if JavaScript is disabled.

What exactly did you mean by appending the stylesheet with Javascript though — scarecrow850, Sep 11 '15 at 02:16
Well if JavaScript is supported it will be added since you used JavaScript to add it. — epascarello, Sep 11 '15 at 02:20

score 6 · Accepted Answer · answered Sep 11 '15 at 02:19

6

Two ways to do it:

Append the JavaScript-only stylesheets with JavaScript:

function appendStyle(url) {
  var sheet = document.createElement("link");
  sheet.setAttribute("href", url);
  sheet.setAttribute("rel", "stylesheet");
  sheet.setAttribute("type", "text/css");
  document.head.appendChild(sheet);
}

If you don't mind loading the CSS for the JS and you just want to override your site's default appearance you can use a noscript tag instead:
```
<noscript>
  <link href="your/no-js/stylesheet.here.css" type="text/css" rel="stylesheet">
</noscript>
```

answered Sep 11 '15 at 02:19

Sean Vieira

155,703
32
311
293

1

Note that the 2nd option is preferable to the 1st if most people using your site have JS enabled (the vast majority of cases), because loading the stylesheet with JS will prevent the browser from loading it in parallel with other site assets after the initial HTML parsing stage. It first has to download the JS, then execute it, and finally download and apply the CSS. You will experience a [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content). On the other hand the 2nd solution only requires JS-less users to download another resource in parallel with the main stylesheet. – lleaff Jan 19 '17 at 16:53
@lleaff - the javascript could be written inline with a ` – BeeOnRope Sep 08 '21 at 17:40

score 3 · Answer 2 · answered Sep 11 '15 at 02:18

You can use like this...

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <link rel="stylesheet" href="general css file" />
        <noscript>
          <link rel="stylesheet" href="CSS file for JS dissable" />
        </noscript>

This works for me

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

modernizr, the defacto standard for feature detection uses a "no-js" class on the body element, then when the page loads it uses javascript to remove this class. then you dont need seperate sheets you just need to precede your javascriptless styles with ".no-js".

.no-js .some-div {
   background-color: #fff;
}

.some-div {
    background-color: #000;
}

What is the purpose of the HTML "no-js" class?

Oriol · Answer 4 · 2015-09-11T02:42:36.430

You can use alternate stylesheets, with the sheet for disabled JS set as the preferred one:

<link id="sheet-nojs" rel="stylesheet" href="..." title="JS disabled" />
<link id="sheet-js" rel="alternate stylesheet" href="..." title="JS enabled" />

And then use JS to set the sheet for enabled JS as the preferred one:

document.getElementById('sheet-nojs').disabled = true;
document.getElementById('sheet-js').disabled = false;

<link id="sheet-nojs" rel="stylesheet" href="data:text/css,
   body { background: red; }
   body:before { content: 'JS disabled'; }
" title="JS disabled" />
<link id="sheet-js" rel="alternate stylesheet" href="data:text/css,
   body { background: lime; }
   body:after { content: 'JS enabled';}
" title="JS enabled" />
<script>
document.getElementById('sheet-nojs').disabled = true;
document.getElementById('sheet-js').disabled = false;
</script>

score -1 · Answer 5 · answered Sep 11 '15 at 02:21

<script type="text/javascript">
    // create the link element
    var jsStyles = document.createElement('link');
    // reference the stysheet
    jsStyles.setAttribute('href', 'path/to/stylesheet.css');
    // add it to the head element
    document.head.appendChild(jsStyles);
</script>
<!-- use a "noscript" tag for browsers that have javascript disabled -->
<noscript>
    <link href="path/to/no-js-styelsheet.css" />
</noscript>

How to use a different CSS stylesheet if a user has JavaScript disabled in their browser?

5 Answers5

Linked