Conditional include of CSS, but not as last (or first) CSS

Question

This question adds a CSS conditionally as the last CSS link (effectively overwriting all others), with this javascript:

<link rel="stylesheet" href="website/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="website/reveal/css/reveal.min.css">
<link rel="stylesheet" href="website/reveal/css/theme/simple.css" id="theme">
<!-- Conditionally add <link rel="stylesheet" href="website/reveal/css/print/pdf.css"> -->
<script type="text/javascript">
if (...) {
    var lnk = document.createElement('link');
    lnk.type='text/css';
    lnk.href='website/reveal/css/print/pdf.css';
    lnk.rel='stylesheet';
    document.getElementsByTagName('head')[0].appendChild(lnk);
}
</script>
<link rel="stylesheet" href="website/highlight/highlight.css">
<link rel="stylesheet" href="website/optaplannerPresentation.css">

The problem is: It adds it as the last CSS link, overwriting the later 2 CSS files (including highlight.css). Is there a way to add it after the simple.css, but before the highlight.css?

did you try to load highlight.css using js too?

worldask
– worldask

2014-09-20 07:35:38 +00:00
Commented Sep 20, 2014 at 7:35 — worldask
– worldask, Commented Sep 20, 2014 at 7:35

T.J. Crowder · Accepted Answer · 2014-09-20 07:41:29Z

Two options for you:

If the condition you're testing is using information immediately available and your script element doesn't use async or defer, this could be one of the rare cases where document.write is a reasonable option:

<link rel="stylesheet" href="website/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="website/reveal/css/reveal.min.css">
<link rel="stylesheet" href="website/reveal/css/theme/simple.css" id="theme">
<!-- Conditionally add <link rel="stylesheet" href="website/reveal/css/print/pdf.css"> -->
<script type="text/javascript">
if (...) {
    document.write('<link type="text/css" rel="stylesheet" href="website/reveal/css/print/pdf.css">');
}
</script>
<link rel="stylesheet" href="website/highlight/highlight.css">
<link rel="stylesheet" href="website/optaplannerPresentation.css">

If you're using an async / defer script, or information that isn't avaialble inline, or you just don't want to use document.write, you can still do it: You can find the link that adds highlight.css via querySelector using an attribute-ends-with selector, then use its parentNode and the parent's insertBefore to insert the new link in front of it.

var lnk = document.createElement('link');
lnk.type='text/css';
lnk.href='website/reveal/css/print/pdf.css';
lnk.rel='stylesheet';
var highlight = document.querySelector('link[href$="highlight.css"]');
highlight.parentNode.insertBefore(lnk, highlight);

querySelector works in all modern browsers, and also IE8. It returns the first element that matches the CSS selector you give it. (There's also querySelectorAll, which returns a list of all matching elements.)

To do that, though, your code must be after the link for highlight.css (unless it's running async or in some event handler):

<link rel="stylesheet" href="website/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="website/reveal/css/reveal.min.css">
<link rel="stylesheet" href="website/reveal/css/theme/simple.css" id="theme">
<link rel="stylesheet" href="website/highlight/highlight.css">
<!-- Conditionally add <link rel="stylesheet" href="website/reveal/css/print/pdf.css"> -->
<script type="text/javascript">
if (...) {
    var lnk = document.createElement('link');
    lnk.type='text/css';
    lnk.href='website/reveal/css/print/pdf.css';
    lnk.rel='stylesheet';
    var highlight = document.querySelector('link[href$="highlight.css"]');
    highlight.parentNode.insertBefore(lnk, highlight);
}
</script>
<link rel="stylesheet" href="website/optaplannerPresentation.css">

Zaheer Ahmed · Accepted Answer · 2014-09-20 07:36:58Z

0

Because JavaScript not executes with page rendering, so you need to add a place holder and then replace:

function changeCSS(cssFile) {
    document.getElementById('stylesheetReplace').href='cssFile';
}

and placeholder for css:

<link rel="stylesheet" href="website/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="website/reveal/css/reveal.min.css">
<link rel="stylesheet" href="website/reveal/css/theme/simple.css" id="theme">
<link rel="stylesheet" href="" id="stylesheetReplace>

answered Sep 20, 2014 at 7:36

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

1 Comment

T.J. Crowder Over a year ago

No, that's not necessary at all.

Collectives™ on Stack Overflow

Conditional include of CSS, but not as last (or first) CSS

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related