Dynamically-added stylesheet markup does not take effect under IE

Question

I'm adding stylesheets dynamically to a page using JavaScript:

document.getElementsByTagName('head')[0].innerHTML += '<link href="/assets/standards/global.css?body=1" media="screen" rel="stylesheet" type="text/css" /><link href="/assets/standards/header.css?body=1" media="screen" rel="stylesheet" type="text/css" /><link href="/assets/standards/footer.css?body=1" media="screen" rel="stylesheet" type="text/css" />';

Under Chrome, everything renders with proper styling; under IE8 and IE9, everything renders without styling. Any ideas why?

(Note: In my situation, it's not an option to inject stylesheets via document.createElement + head.appendChild, so that's not a solution. Also note: I cannot use jQuery in this situation, either.)

Background: I am adding stylesheets in JavaScript because I need to add a different stylesheet when the Document Mode is < IE9:

<!--[if gt IE 8]>
    <%= javascript_tag do %>
        if (document.documentMode < 9) {
            // Browser Mode = IE9+, Document Mode = IE8-.
            document.getElementsByTagName('head')[0].innerHTML += '<%= stylesheet_link_tag("ie8").gsub("\n", '').html_safe %>';
        }
        else {
            // Browser Mode = IE9+, Document Mode = IE9+.
            document.getElementsByTagName('head')[0].innerHTML += '<%= stylesheet_link_tag("core", "widgets").gsub("\n", '').html_safe %>';
        }
    <% end %>
<![endif]-->

You *can* use DOM properties, but you cannot use DOM methods? How come? — Yuriy Galanter, Sep 30 '13 at 21:46
I cannot use document.createElement because my backend is sending generated `` tag markup. The backend is not returning an array of stylesheet URLs (which would be nice, but that's the constraint). — Chad Johnson, Sep 30 '13 at 21:51
If the link is formed at the backend - can't it be added to the page at the back end? Any reason you need to do this on client? — Yuriy Galanter, Sep 30 '13 at 21:55
Basically I have to add a different set of stylesheets if Document Mode < IE9. I've updated the question with background info. — Chad Johnson, Sep 30 '13 at 21:59

smokey.edgy · Answer 1 · 2013-09-30T22:09:33.877

2

I've had this issue before and recall using document.createStyleSheet instead:

document.createStyleSheet('mycssfile.css");

This is an IE-only function so you'd be safer to have a fallback like so:

if(typeof document.createStyleSheet == 'function') {
  document.createStyleSheet('mycssfile.css');
} else {
  //your document.getElementsByTagName('head')[0].innerHTML or some jQuery/favourite framework equivalent
}

A caveat of this function is that it is being deprecated in IE11. (http://msdn.microsoft.com/en-us/library/ie/ms531194(v=vs.85).aspx)

edited Sep 30 '13 at 22:09

answered Sep 30 '13 at 22:03

smokey.edgy

636
6
3

Yeah I found that solution at http://stackoverflow.com/a/1184960/83897 as well...giving that a try. Sucks that that's the only solution that works and MS is going to deprecate it. – Chad Johnson Sep 30 '13 at 22:28
I believe the newer IE browsers will be okay with adding the stylesheets straight to the DOM just like Chrome and Firefox. Which I think is why they are deprecating it. My best guess is that there is some internal limitation that old IE browsers have that require the use of this method. – smokey.edgy Sep 30 '13 at 22:59

score 0 · Answer 2 · answered Sep 30 '13 at 23:19

0

innerHTML adds the text but doesn't load the url. You can create a new link element, attach a src attribute and append that to the document head using dom methods in any browser that uses the dom at all back to IE 6.

answered Sep 30 '13 at 23:19

kennebec

102,654
32
106
127

Dynamically-added stylesheet markup does not take effect under IE

2 Answers2