function addCssFile(css) {
var styleElement = document.createElement(”link”);
styleElement.type = “text/css”;
styleElement.rel=”stylesheet”;
styleElement.href = css;
document.getElementsByTagName(”head”)[0].appendChild(styleElement);
}

a { color: #F82156; text-decoration: none }
a:visited { color: #752007; }
a:hover { text-decoration: underline }

For this and similar situations, adding script blocks is a great solution.

Thanks for the clarification. I agree. I think this is why we should use toolkits and libraries.

A similar problem exists with dynamic script tags — Dynamic Script Tags

Oliver

@Ross - The maintainability aspect is from the separation of JavaScript and CSS, as described in my talk. Victor pointed out that using this function would require embedding of CSS into your JavaScript code. However, that doesn’t have to be case. You can retrieve the CSS via XHR and insert it into the page using this function. That way, the CSS and JavaScript are separated and you are able to dynamically load styles (which becomes necessary more frequently these days) with all the bells and whistles of other XHR requests.

You say: “This block of code [style block] can be placed anywhere in a page …”

According to the HTML 4.01 spec section 14.2.3, style tags must be contained in the head element: “HTML permits any number of STYLE elements in the HEAD section of a document.”

Link to the spec:
http://www.w3.org/TR/html401/present/styles.html#edef-STYLE

I’m not sure what the browser support is for style blocks defined outside the head (most likely it works fine), but there’s no reason not to stick to the spec — append the style block to the head, as you do in the Safari example.

Also, a comment:
I don’t really see the maintainability benefit of this technique. If you compress/minify your CSS and allow the browser to download and apply it, what would the benefit of dynamically creating styles be?

I don’t mean to be negative, the article is well-written and makes some interesting points.

Thanks for the information regarding IE, but I think the style tag would always be in the head tag not outside of it. The Safari implementation is correct.

Even if you leave Safari out, I think putting the style tag outside of the head will not work in strict mode.

The YUI blog is informative and great.