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

meh. I don't have enough points to vote up Andrei Cimpoca's result, but that solution is the best one here.

style.innerHTML = "..."; does not work in webkit engines or ie.

To correctly inject css text, you must:

style.styleSheet.cssText = "..."; for ie.

and

style.appendChild(document.createTextNode("...")); for webkit.

Firefox will also work with the second option, or with style.innerHTML = "...";

Answer 2

I know it's an older topic, but thought someone would benefit. I too needed to load css dynamically into my page (before everything rendered onload, according to included "component" templates):

var oStyle = $("<style />");

oStyle.append("@import url(" + sTemplateCssUrl + ");");
oStyle.attr("type", "text/css");

$(document.head).append(oStyle);

I tried appending to document.head with a one-line approach -- worked in IE 10 and Chrome, but not in Safari. The approach above worked in all 3.