DOM CSS Cross Browser Library

Question

I normally work with jQuery, which takes away most of the cross browser pain (although not, unfortunately, all). However, it doesn't seem to have any support for manipulation of the CSS DOM, and this still seems to be a bit of a minefield - QuirksMode has some information.

Our application allows users to theme their site to some extend by generating a CSS stylesheet with the colours that they have selected. It's pretty straightforward, but I'd like to let them "preview" it by applying the changes directly to the CSS DOM, before having them save it back to the database and generating the CSS file.

Does anyone know of a library which will make cross browser CSS DOM maniuplation easier? Just so we're clear, I'm not trying to change the css rules on an element, or set of elements (like with $.css()), or to add/remove classes. I would like to modify the stylesheets directly.

Answer 1

Couldn't you just add or replace a <style> element in the main document's DOM, and fill it with the generated CSS?

Answer 2

Best and easiest way, is to create a .jsp .php or whatever you're using which accepts colour parameters, which in turn renders a .css output with colours replaced.

Use JavaScript to make a request with colour parameters and append the css script to the page.

It is possible to do it directly on the styleSheet object, though this will take more time and create more maintenance. Everytime you want to change your custom stylesheet you actually use for production, you will also have to change the preview version. Ergo discrepancies will ensue.

Just reuse the stylesheet template you're going to use for production anyways.

Answer 3

Maybe you should try something like:

document.styleSheets[0].disabled = true;

This disabled the first stylesheet of the current page. Maybe if you play around with it you can resolve your problem.

Answer 4

I highly recommend the YUI stylesheet utility. I haven't seen any other libraries with as much functionality or as clean an interface.