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.
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!
> 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.
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.
you should take a look at blueprint. used it and works great
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.
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.
@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