JavaScript CSS Parser for Custom Properties

Wouldn’t it be great to have a generic CSS parser implemented in JavaScript in order to move presentational options to the stylesheet instead of having presentational and behavioural settings it in the markup. I ran across the problem the other week when I was writing a jQuery plugin for grabbing external data using getJSON-function. First I intended to only use an anchor as a bootstrap for the jQuery plugin, that worked well until the designers went Andy Warhol and started saying: Sometimes we want this generic solution to be more generic, and other times we want it to be yellow, and sometimes yellow is just not the colour we are after, yada yada. And I replied: As long as you treat those babies the same when they appear on the same page. But of course they had some crack-brain-solution where they would go bezerk on usability and treat all of these generic items as they were specific, I felt the need for some smart way to adjust the presentation via parameters, and I used John Resigs metadata plugin, which is neat when you need to treat every instance passed to a generic plugin specific. But I was a bit annoyed moving presentation settings to the markup, it would have been neat to have a non-standard css-based stylesheet for handling these kind of issues. Typical plugins that could use such a plugin is of course all lightbox-clones (it would be great to move presentation data such as width, height, position to a stylesheet) and form validation plugins and other plugins that are heavy on configuration.

I do not know if this is a good idea, I have to check for existing solutions and see what the side-effects are? Probably someone have already implemented this, but I have yet to find the solution, otherwise I might as well try to write it (and fight all the potential browser bugs that I am sure will evolve during an implementation of such a solution).

7 thoughts on “JavaScript CSS Parser for Custom Properties”

There’s some I found while looking for Javascript based CSS parser too, haven’t tried it yet though, you might be interested, http://www.senocular.com/index.php?id=1.289

Reply ↓

I had the same thought and came up with this:
http://youngisrael-stl.org/wordpress/blogfiles/cssparser/cssparser.jquery.js
You can see it discussed at
http://youngisrael-stl.org/wordpress/2007/10/19/css-parser-in-javascript/
though I haven’t worked on it a while. Help would be appreciated.

I found this blog entry because I’m thinking about it again and googled to see if anyone else did it. For a real sophisticated take, look at Dean Edward’s ie7.js (http://code.google.com/p/ie7-js/).

Reply ↓

Malih and Daniel, thanks for the great input. Both scripts look interesting. Actually the idea started partly from Dean Edwards IE7 script, but I am not sure whether or not is a generic solution easily adaptable for all major browser vendors, should look into that as well.

Reply ↓

I got the CSS parser working (FF 3, IE 7, Safari 3, Opera 9, all under Windows Vista). No real documentation yet, but you can see it in action at
http://youngisrael-stl.org/wordpress/blogfiles/cssparser/cssparsertest.php

with the Javascript code in
http://youngisrael-stl.org/inc/jquery.cssparser.js

You can do things like
h1 {
-jquery-gradient: white blue vertical;
-jquery-corners: round 10pt;
}

and it is livequery-aware, so it can keep up with changes in the DOM

Reply ↓