archives
- June 2009 (2)
- May 2009 (11)
- April 2009 (5)
- March 2009 (4)
- February 2009 (3)
- January 2009 (5)
- December 2008 (1)
- November 2008 (2)
- October 2008 (4)
- September 2008 (2)
- August 2008 (4)
- July 2008 (10)
- June 2008 (5)
- May 2008 (5)
- April 2008 (10)
- March 2008 (13)
- February 2008 (3)
- January 2008 (7)
- December 2007 (7)
- November 2007 (9)
- October 2007 (10)
- September 2007 (1)
blogroll
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.
about
Find out more about the author here.
categories
- Blogging (5)
- Business (48)
- Design (3)
- Django (1)
- FireFox 3 (2)
- General (4)
- GTD (2)
- Holiday (3)
- IE 8 (1)
- iTouch (2)
- Life 3.0 (2)
- Life Hacks (37)
- Management (2)
- Marketing (10)
- Mobile (1)
- offbeat (3)
- Outlook (1)
- Personal Development (16)
- Podcasting (1)
- Productivity (24)
- Programming (13)
- Project Management (1)
- Python (1)
- Reviews (2)
- Sales (6)
- Social Networking (12)
- Symfony (1)
- Systems (2)
- Travel (1)
- Twitter (2)
- Ubuntu (7)
- Video (4)
- Web Design (1)
- Windows 7 (1)
- Windows Vista (1)
- Windows XP (1)
- xv6800 (1)
members
most commented post
- » Managing Your Life With GTD, Online Tools and a File Cabinet - 20
- » How To Download Ustream.tv Videos - 15
- » Get Symfony Installed in 20 Minutes on Vista - 13
- » Plurk Unleashed! - 12
- » Using The Web To Save on Holiday Gifts - 12
- » What Online Social Media Networks Do You Participate In? - 11
- » 19 Secrets From LA's Top SEO Firm - 10
- » The Story Behind iPhone.com - 10
- » Running Microsoft Office 2007 Under Wine 1.0 in Ubuntu Hardy Heron 8.04 - 8
- » CSS Equivalent of Prototype? - 7
recent entries
- Effective Meetings on a Budget
- Internet Marketing: How-to
- Tweetie for Mac OS X Now Allows Proper Retweets
- Online Garage Sale
- What tabs do you open first when launching your browser?
- Are Social Media Networks Right for Your Business?
- 10 Ideas for More Powerful Negotiations
- Turn Your Windows Mobile Phone into a WiFi Router
- Mobile Productivity with the iPhone or Touch
- What Ideas Have Increased Your Productivity the Most?
Wordpress theme by Wordpress Themes & made free by Internet Marketing Center
Copyright 2008, ThinkingSerious.com

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