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.
-
2append the stylesheet with JavaScript...epascarello– epascarello2015-09-11 02:10:43 +00:00Commented Sep 11, 2015 at 2:10
-
1document.write or appendChildepascarello– epascarello2015-09-11 02:13:54 +00:00Commented Sep 11, 2015 at 2:13
-
What exactly did you mean by appending the stylesheet with Javascript thoughscarecrow850– scarecrow8502015-09-11 02:16:18 +00:00Commented Sep 11, 2015 at 2:16
-
Well if JavaScript is supported it will be added since you used JavaScript to add it.epascarello– epascarello2015-09-11 02:20:43 +00:00Commented Sep 11, 2015 at 2:20
Add a comment
|
5 Answers
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
noscripttag instead:<noscript> <link href="your/no-js/stylesheet.here.css" type="text/css" rel="stylesheet"> </noscript>
2 Comments
lleaff
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. On the other hand the 2nd solution only requires JS-less users to download another resource in parallel with the main stylesheet.
BeeOnRope
@lleaff - the javascript could be written inline with a
<script> element, which in my testing results downloading starting at a similar time to <link> explicitly in the HTML.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
Comments
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;
}
Comments
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>
Comments
<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>
