CSS Equivalent of Prototype?

One of our programmers had the following comment in a recent Subversion commit: “Verified to display correctly with IE6, IE7, FF Ubuntu, FF, Galeon, Konqueror”. Sigh… don’t you hate when you have to do that? Frameworks like Prototype and Symfony has made development life much easier, but sadly CSS cross browser hell still brings the pain. So I ask, can some brave master-hacker create a Prototype/Symfony like framework for us poor CSS/HTML programmers?

If I had a genie that granted three magical, CSS related wishes, here is what I would ask for:

1. Command line CSS generator

I would like to be able to type something like: generate-css 3-column header-yes footer-yes (with a shorthand version of course) that would generate a layout that was optimized for all the major browsers. It should also allow me to pass specific parameters, such as column width, header height, etc…

2. Real time validator

Whenever I try to implement some un-holy CSS, there should be blazing sirens and flashing lights (or maybe just a red underline) that warns me which browser I am offending. A smart suggestion drop-down should be available that can make a good guess at what I was trying to do and offer alternatives.

3. Browser simulator

You would feed this tool your css and html and it would tell you which browsers are not playing nice and offer a visualization/emulation. Perhaps a grid that shows the layouts side by side would be useful.

I know I’m asking for allot, but I saw hope at Borders by way of a book called CSS design patterns. Until a super hero hacker comes to save the day, I’ll just resume pulling out my hair.

I would be happy to explore this further and perhaps get something initiated on source forge. If you have some good solutions to this issue or are interested in implementation, please post your thoughts and resources in the comments.

Speak Your Mind