My brain doesn’t really grok Cascading Style Sheets, also known as CSS.  In theory it’s a very logical system where one can dictate how HTML markup actually looks as well as page layout.  By using a stylesheet, one can get a consistent style of presentation across an entire site.

I actually was all pumped to use this technology when it first came out.  Years later, I’m still a sucky novice at CSS, although I manage to solve a problem with it every now and then.  I think what prevents me from learning easily is that it’s not really like programming at all.  There are a myriad of browser inconsistencies and bugs that designers commonly work around to do their jobs.

If you look at the source code of a random sampling of pages out there, chancees are high you’ll see comments about “IE compatibility” or “Firefox only.”  That’s really too bad, considering CSS is a W3C standardized spec and this kind of crap only limits adoption!

Anyway, the reason I suck at CSS is because once I see this kind of incompatibility bullshit, my brain turns off.  I automatically become too lazy to learn.  I begin searching Google for my specific problem to retrieve a particular incantation of hacks to solve my issue.  It’s like modern day alchemy to me.  I don’t completely understand the solution or how the authors came up with the given hacks, but it seems to work out okay, which is good enough for me.

What I’d really like is to take a given page, render it, and see HOW the browser made its decision to render things in a certain way.  I would like have before and after pictures that demonstrate how a change to the CSS will affect the layout of the site.  I’m not content to simply make a CSS change and then reload random pages across all possible browsers of interest.  I want to know enough CSS to get my job done and not have to become an expert.  Anybody know of testing tools that would make CSS authoring more like actual structured programming?