Trouble programmatically adding CSS to IE

Question

I have a bookmarklet which inserts a CSS stylesheet into the target DOM via a "link" tag (external stylesheet).

Recently, this stopped working on Amazon.com, in Internet Explorer only. It works on other sites, and with other browsers (even on Amazon.com). The technique we're using to insert the stylesheet is pretty straightforward:

document.getElementsByTagName('head')[0].appendChild(s);

Where "s" is a link object created with document.createElement. Even on Amazon, I see via the Internet Explorer Developer Toolbar DOM inspector that the element is there. However if I alert the document.styleSheets collection in JavaScript, it's not there.

As a test, I tried to use the IE-only document.createStyleSheet method passing the URL to my stylesheet as an argument. This throws the error:

Not enough storage is available to complete this operation

Points of interest:

• The documentation for document.createStyleSheet says an error will be thrown if there are more than 31 stylesheets on the page but (1) it's a different error, and (2) there are only 10 external stylesheets on the page.
• My googling for the error turned up a number of dead-ends, and the only one that suggested anything stylesheet-related was this drupal post, but it refers to a character limit on inline styles, as opposed to a problem relating to external styles.
• The same code, even the createStyleSheet call, works on other sites in IE.

This has reached "complete mystery" status for me.

Answer 1

I just tried this

javascript:(function(d) { d.createStyleSheet().cssText="* {color:blue !important;}"   })(document);

and

javascript:(function(d) { d.createStyleSheet("http://myschemas.com/pub/clear.css") })(document);

from IE on amazon.com and both worked. Maybe you need to add the !important to some items of your css to be sure they take effect now?

UPDATE: Found a possible solution for you...

javascript:(function(c) {c[c.length-1].addImport("http://myschemas.com/pub/clear.css")})(document.styleSheets);

Hope it helps you.

Answer 2

Looking for an answer, I have found that the 31 stylesheets limit raise this exception when loading CSS programatically:

http://www.telerik.com/community/forums/aspnet-ajax/general-discussions/not-enough-storage-is-available-to-complete-this-operation.aspx

The original limitation is described in a Knowledge Base document (suppossed only to happen on IE8 and below, but repeatedly reported as happening in IE9):

http://support.microsoft.com/kb/262161

Answer 3

This is all I do, and it I have never seen it not work.

loadCss = function( name, url ) {

    var head = document.getElementsByTagName('head')[0];

    var link = document.createElement("link");

    link.setAttribute("type", "text/css");

    link.setAttribute("rel", "stylesheet");

    link.setAttribute("href", url);

    link.setAttribute("media", "screen");

    head.appendChild(link);
};

Answer 4

I was doing something similar using jQuery and found that I had to do it in this order:

var $link = $('<link>');
$('head').add($link);
$link.attr({
  type: 'text/css',
  // ... etc ...
  media: 'screen'
});

Otherwise it doesn't work in IE (IE7, haven't looked at IE8 yet).

HTH