CODEWITHSUNDEEP
javascriptinternet-explorercss
Alohci
Alohci

Reputation: 82986

Add an alternate stylesheet in IE11 with script

Consider this JSBin example

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test Case</title>
  <!-- red -->
  <link rel="stylesheet" type="text/css" href="data:text/css;base64,aHRtbCB7YmFja2dyb3VuZC1jb2xvcjpyZWR9" />
  <!-- blue -->
  <link title="a" rel="alternate stylesheet" type="text/css" href="data:text/css;base64,aHRtbCB7YmFja2dyb3VuZC1jb2xvcjpibHVlfQ==" />
  <!-- green -->
  <link title="b" rel="deferred" type="text/css" href="data:text/css;base64,aHRtbCB7YmFja2dyb3VuZC1jb2xvcjpncmVlbn0=" />
</head>
<body>
  <script>
    window.onload = function() {
      var elem = document.querySelector("link[rel=deferred]");
      var parent = elem.parentNode;
      parent.removeChild(elem);
      elem.rel = "alternate stylesheet";
      parent.appendChild(elem);
    }
  </script>
</body>
</html>

Run the example and in Firefox and Chrome, the background of the page will be red. Run it in IE11, and the background will be green.

Can anyone shed any light on why IE11 is styling the page to the added stylesheet even though it is marked as an alternate only?

UPDATE:

Further investigation shows that this only happens when re-using the link element. Creating a new link element is fine, so it seems that in IE, the "alternate" flag on the element is not being updated when the rel attribute changes.

Upvotes: 0

Views: 207

Answers (1)

user3982863
user3982863

Reputation:

rel="deferred" isn't a valid link type so IE will ignore it and load the base 64 reference. By setting it to rel="alternate stylesheet", the browser still requests the resource on page load but will not render it.

It seems you're trying to both defer loading of the CSS resource and then (once it does load) prevent the browser from rendering it? Worth reading Debunking Responsive CSS Performance Myths by Ilya Grigorik to see how these techniques don't always work as you'd hope them to.

Upvotes: 1

Related Questions