How do I load css rules dynamically in Webkit (Safari/Chrome)?

Question

I currently have issues in Webkit(Safari and Chrome) were I try to load dynamically (innerHTML) some html into a div, the html contains css rules (...), after the html gets

Answer 1

Here's the gig. What Patrick said did not work for me. Here's how I did it.

    var ref = document.createElement('style');
ref.setAttribute("rel", "stylesheet");
ref.setAttribute("type", "text/css");
document.getElementsByTagName("head")[0].appendChild(ref);
if(!!(window.attachEvent && !window.opera)) ref.styleSheet.cssText = asd;//this one's for ie
else ref.appendChild(document.createTextNode(asd));

InnerHTML is deprecated and shouldn't be used for such a thing. Furthermore it is slower too.

Answer 2

I think it's a better practice to append a "link" tag to the head of your document. If that isn't possible, try to append a "style" tag to the head. Style tags shouldn't be in the body (Doesn't even validate).

Append link tag:

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

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

link.type = 'text/css';

link.href = 'http://example.com/stylesheet.css';

document.head.appendChild(link);

Append style tag:

var style = document.createElement('style');

style.innerHTML = 'body { background-color: #F00; }';

document.head.appendChild(style);

Answer 3

Thanks Vatos, you gave me a good lead, basically I did what you suggested but used jquery to set the html and append the new style to the head since, safari/chrome would stall when doing innerHTML and document.head was undefined. My code ended looking like this

var cssDefinitions = '..my style chunk goes here';
var style = document.createElement('style');'
$(style).html(cssDefinitions);
$('head').append(style);

Answer 4

simplest way (using jQuery that is) is the following:

var cssLink = $('<link />');
cssLink.attr("rel","stylesheet")
cssLink.attr("type", "text/css");
cssLink.attr("href","url/to.css");

If you do it that way then it will work in Safari. If you do it the normal jQuery way (all in one text string) it will fail (the css won't load).

Then you just append it to the head with $('head').append(cssLink);

Answer 5

Besides the style tag based versions above, you can also add styles using javascript directly:

var style = document.getElementById('some-style-tag');
var sheet = style.sheet;
sheet.insertRule('.mydiv { background-color: ' + color + '; }', sheet.cssRules.length);

This has the advantage of being able to use variables without having to resort to cssText/innerHTML.

Keep in mind that on webkit based browsers this can be slow if you are inserting a lot of rules. There is a bug open to fix this performance issue in webkit (https://bugs.webkit.org/show_bug.cgi?id=36303). Until then, you can use style tags for bulk inserts.

This is the W3C standard way of inserting style rules, but it is not supported by any version of IE: http://www.quirksmode.org/dom/w3c_css.html

Answer 6

Straight-up jQuery way (that works on major browsers - including Chrome): http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/

From the site:

$("head").append("<link />");
var CSS = $("head").children(":last");
CSS.attr({
"rel": "stylesheet",
"type": "text/css",
"href": "url/to.css"
});

Note: the example also includes injection of JS, which can be ignored if you just want to inject a CSS reference.