Read my book

I wrote books about Webpack and React. Check them out!

Wednesday, April 13, 2011

CSS Gradient Adapter Using RightJS

In case you checked out the source of yesterday's CSS gradient demos you probably came to the same conclusion as I. It was just friggin' ugly. A lot of duplication and room for error. Not a DRY solution at all...

Is there anything we can do about this? As it happens, yes. All we need to do is to develop a little adapter. It just converts to some nice, generic syntax to some CSS required by a browser we are currently dealing with.

I did this by extending RightJS's setStyle method. The implementation is not flawless and does not support all possible cases. It should give you enough idea for you to implement something similar.

In case you aren't too fond of handling this on the client side, you could try coming up with some sort of CSS preprocessor. Check out Sass for a good example.

I've set up a simple fiddle demonstrating this technique. Give it a go and let me know what you think. :)