cssjs

Project page, with examples and tips, can be found here.

This is a pretty simple class for the mootools library inspired by this post on the mootools forum. It adds a style element to the DOM, which is generated using the input you provide. This modifies the appearance of the page.

So, apparently it would be nice to be able to do certain things with CSS. Traditionally, these sorts of things are done on the server side using a server side language (like PHP) that generates CSS every time you hit the page. Wouldn't it be nice to do it on the client side? As the page loads and after, as the user interacts with it?

I think we can break down the usefulness of the technique into three categories:

Programmatic CSS Browser Compatibility Custom CSS Properties With programmatic css, you can use loops to generate CSS that might have taken pages to type out. You can have CSS constants. You can do all sorts of math and calculations for a property. You can also modify the style of elements on the fly, without using javascript on each element. I'm sure there's other cool stuff you can do that I didn't think of.

Browser compatibility is sort of self-obvious. Before, you used to have a style sheet for each browser to allow for their quirks and weird CSS implementation. Now you can generate CSS that is browser specific using JS. The class is built to allow you to extend it for any browser and any property. You can specify a property to be limited, in which case it will only generate it for the browser you specify.

Ever wanted to invet your own CSS property? Now you can. See the examples for what I mean.

Tags

  dynamic json properties programmatic custom browser css javascript compatibility js mootools

Share