Question

The syntax of CSS is a bit similar to JSON, making me wonder whether I could dynamically load and apply a CSS “theme” from a CouchDB using AJAX. I know I can already serve a CSS file as an attachment, but if the CSS was an actual document, then it could be updated by users. There could also be several such documents, like css “themes”. How would that work? I see 2 problems:

1) how to store the CSS as JSON ( in one big string field, or as a structured document? )

2) how to apply the CSS dynamically.

I have found that using jQuery, I can apply CSS to selected elements, but it doesn’t work the same as “normal” CSS because the rules of precedence don’t apply — you simply affect all selected elements each time you call the .css() function. What I really need is a way to load an entire “css file” ( as a document ) and apply the whole thing as if it were a normal css file.

Maybe a "_show" function can transform a structured JSON/CSS document into a “normal” CSS string with standard CSS syntax? Then i just need to figure out how to “apply” it at run-time.

Appreciate any thoughts, ideas, and relevant links — thanks.

Answer 1

You are right about _show function being a good way to dynamically generate non-json response from CouchDB’s documents. As for loading that css, code should look like this:

var cssTag = $("head").add("link");
cssTag.attr("rel", "stylesheet");
cssTag.attr("type", "text/css");
cssTag.attr("href", filename);

In short, you are adding a link tag in the head.