13
Oct

CSS Equivalent of Prototype?

Posted by: ThinkingSerious
in Programming

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.

"CSS Equivalent of Prototype?" was posted by ThinkingSerious and received 7 users commented
MyAvatars 0.2
pbhj said,         
October 13 2007

I think http://developer.yahoo.com/yui/grids/ is what you’re after. It’s a framework for CSS using modular CSS files and the correct div names to build up robust CSS grids.

Maybe not quite an equivalent but I think it’s what you’re describing.

I was just considering this for my next website design project - a charitable site (ie I charge less), so I get to mess around a bit more with new stuff!

MyAvatars 0.2
foobar said,         
October 14 2007

> CSS/HTML programmers

There are no CSS/HTML programmers, since these languages are no programming languages.

> I would like to be able to type something like:
> generate-css 3-column header-yes footer-yes

There are several cross-browser multi-column layouts available.

> 2. Real time validator

As for validation, any recent editor with syntax highlighting will do it. I personally prefer Kate, but there are others available.

> there should be blazing sirens and flashing lights
> (or maybe just a red underline) that warns me which
> browser I am offending.

Since your editor doesn’t know what you want to accomplish, there’s little use of flashing and howling. AI isn’t that advanced yet.

> 3. Browser simulator

There are several online services available. As for convenience, there is no way around installing every crap you’re caring about in parallel. Concerning IE, ies4linux is a most valuable tool. Note you need a valid Windows license too use this. Installing multiple IEs under Windows is a little more dangerous, though.

MyAvatars 0.2
quodlibetor said,         
October 14 2007

It seems like what you want is a combination of some decent templates and text editors that actually have css dictionaries built in. And that third part is just impossible :) Building a preview function is, i think, exactly equivalent to building a browser from scratch. And if you want it to match the output of 5 different browsers, then you’re going to have to _make_ 5 different browsers. Of course, gecko and webkit are both open-source, so you could theoretically just import their back end code. I think quanta plus has gecko preview built in, but i don’t remember for sure.

But i’ve never been able to find anything of the sort.

MyAvatars 0.2
heri said,         
October 15 2007

you should take a look at blueprint. used it and works great

MyAvatars 0.2
Dan Kubb said,         
October 15 2007

You should look at Eric Meyer’s CSS Reset (Reloaded) for an example stylesheet that removes the default styles from most browsers.

This forces you to become totally explicit with what styles you assign, and it makes it less likely you’ll accidentally rely on one browser’s specific defaults when coding a site. Its not perfect, but its a good start.

MyAvatars 0.2
thompark said,         
October 16 2007

I found sort of ‘Real Time Validation’ here: http://accessites.org/site/2006/07/big-red-angry-text/

A smart idea that I haven’t seen before.

Of course this is just poor compared to your wishes, but its a good start, too.

MyAvatars 0.2
Marco said,         
November 1 2007

@thompark - thanks for the mention!

Like you have said, it’s not as robust as a real-time validator being described, but you have to start somewhere :)

Welcome, please leave your comments below

  Username (required)

  Email (required)

  Website

Leave your comments below

Subscribe to this topic via Comment Rss or TrackBack

about

This blog provides programming, design, business and productivity content for tech entrepreneurs living in a 2.0 world.

Find out more about the author here.

categories

members