Safari doesn’t read inline css

Monday 02/9/2009  –  Category: Uncategorized

I'm not sure why I haven't come across this until this past week, but I found out that Safari doesn't render css within style tags outside the head tags.

The workaround is to inject the style into the head with javascript--similar to what Rails' content_for does:

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

(jquery code from stackoverflow)

After this things were looking dandy in Safari but now IE was giving a weird "unexpected call to method or property access" error. It turns out that IE doesn't let you add style elements like this. The workaround for IE looks like this:

var styleElement = document.createElement("style");
styleElement.type = “text/css”;
if (styleElement.styleSheet) {
  styleElement.styleSheet.cssText = “a { color: red }”;
} else {
  styleElement.appendChild(document.createTextNode(”a { color: red; }”));
}
document.getElementsByTagName(”head”)[0].appendChild(styleElement);
 

source: YUI blog