Thursday, December 20, 2007

CSS Inadequacies x Poor Browser Support = Hell

I don't spend as much time as most web designers probably do, creating CSS and XHTML layout from scratch. As a "corporate" designer, most of my time is spent maintaining an existing site. I only have to do substantial CSS and markup work when I redesign the site or add a substantial portion of content to it. So when I am tasked with creating a new CSS layout, I am always reminded of how I hate so many of the problems that exist with CSS and the browser support for it; especially in contrast with Flex (which I've been working with a lot lately). Although Flex has its own set of CSS and layout issues none are as severe as those with XHTML/CSS.

This post sums up a lot of the problems:

I'm not a n00b to CSS. I've been working with it since Netscape 4 barely supported CSS text formatting, and I was doing CSS-P well before most of my designer / developer peers were. But I still struggle with it for many reasons.

It's nearly impossible to create a complex layout without resigning to at least one of the following: employing hacks, giving in to div-itis, compromising your design, or breaking in anything but the most bleeding edge, standards-supporting browsers.

How often does separating content from presentation really work so well that you don't have to change your markup? I know, CSS Zen Garden does it. But that's ONE PAGE. If I have a site of 100+ pages, and maybe 5 or so different layouts (and possibly a mobile version) with umpteen variations in content, and I have to redesign, I have a lot more work cut out for me than just rewriting a style sheet and slicing some new images. Let the DRY approach belong to the programming, and use the "include" and layout rendering features of dynamic development languages. I'm going to be putting all my presentational markup in a couple CF templates anyhow. Semantic and clean markup is still good, and will prevent too much markup rewriting, but the bottom line is that you will still have to rework it.

The C in CSS should stand for Crap. The Cascade does not work. Oh, I know it "works." But more often than not, it gets in the way because it's not supported well enough to rely on it, but it works just enough to create random trickle-down issues. Dreamweaver actually created the "Relevant CSS" panel just to demystify the Cascade. If you can't get better control of where you're inheriting from, and what's relevant, then it just creates inheritance headaches.

I want to create a code-clean, reliably cross-browser compatible hack-free elastic layout without compromising my design or missing my deadline. Is that too much to ask? Apparently so.

End this war, impeach CSS.

No comments: