The css Zen Garden site aims to get graphic designers to make more use of CSS by showcasing work likely to appeal to that group. That seems like a laudable goal, but is it really, and is CSS appropriately showcased?
Few of the typical css Zen Garden "design" features like partial transparency, borders and shadows have been rendered by CSS, mostly they are images. Regularly when a designer uses an image it demonstrates something that CSS 2.x as supported by the dominant browser isn't capable of doing. Using images to mask these shortcomings can not only give a false impression of what CSS is capable of, it makes such "CSS based designs" much more difficult to create and maintain. Attempting to mask CSS shortcomings has a significant negative effect on flexibility, a core CSS feature.
css Zen Garden shows that significant changes to the look and layout can be achieved by changing the CSS with no alterations to the css Zen Garden XHTML source. What css Zen Garden appears to demonstrate is the flexibility that CSS can provide, but this is partially based on an illusion.
Although CSS can provide much greater flexibility compared to presentational markup, CSS 2.1 wasn't designed to provide the flexibility that css Zen Garden appears to demonstrate. The css Zen Garden changes are achieved by using artificial markup hooks and CSS absolute positioning in many of the designs. The artificial markup hooks introduces another new form of inflexibility, and absolutely positioning individual elements often causes new problems.
Content being obscured
However, I think we can all agree that even given that, we're still better off than if this had been built with tables.
Source: comment in the css Zen Garden XHTML code
Are we really better off if content can be obscured by overlapping as is demonstrated in the nearby screencap? Using tables for layout can certainly create problems, but a "CSS layout" in which content can be obscured is arguably a bigger problem than the combined drawbacks of using a table for layout. The illustrated issue is not a one off particular to that design, many sites that use CSS for layout introduce new problems.
CSS 2.x offers poor support for creating a layout. In their eagerness to get rid of layout tables many authors are now using the CSS float mechanism which is fundamentally unsuitable for that purpose. Instead of markup abuse (tables used for layout), we now have widespread CSS abuse (floats used for layout). Or they use absolute positioning; a technique that within limits is suitable for creating layouts, but using absolute positioning requires highly developed coding skills, if those skills aren't in place, or if the coder pushes beyond the limits to make CSS look more capable than it is, the end result is often worse than if a table had been used.
CSS allows complete and total control over the style of a hypertext document.
Source: css Zen Garden
Regrettably CSS advocates sometimes portray CSS as something that it can't live up to.
Although CSS can provide much greater flexibility compared to presentational markup, CSS 2.1 is doesn't provide anything like ideal flexibility. Many stylistic and layout changes require a change to the markup. Particularly so if IE5's limited CSS support is considered as the limit (as should be the case for practical authoring today, and the css Zen Garden rules require this). The only part of CSS that can be considered as truly flexible are selectors, but CSS 2.x selectors are not particularly powerful, and to make things worse IE 5.x and IE 6 only support a few of them.
One of the aims of CSS is to separate content and styling, this is a rather lowly aim. The higher aim is to separate the markup code from the styling and the layout and CSS 2.x doesn't do well in that regard.
The less than enthusiastic embracing of CSS by the designer community demonstrates less that they weren't aware of CSS, or didn't know or like what could be done with it, but more that they found it hard to use. Most designers are of the artistic personality type and not naturally equipped to use the highly technical CSS language. The technology experts who devised the CSS language created something suitable for use by fellow technicians, with little regard for the different needs of the people who were actually meant to use the language: the designers.
It can be argued that this is not so much the fault of the CSS language itself, but that it is due to the lack of appropriate GUI application software that would allow designers to use CSS without knowing the language itself. The fact that there is this lack of software is however partially caused by the unsuitability of CSS to be generated in that manner. An example of this are the CSS rules on Collapsing margins, they make it nigh impossible to reliably generate and manipulate CSS via a GUI application. Add a border or a padding on an element and because margins of other elements are then no longer adjacent the whole design jumps out of kilter. The lack of a suitable layout mechanism in CSS 2.x has also not helped. Browser bugs and important CSS 2.x features that are not implemented in the dominant browser are probably another important factor why such tools are not available.
Although CSS is used widely nowadays, it is still something of a black art, mainly the preserve of technicians if it needs to be taken beyond the basics.
Contributing to the less than enthusiastic take up of CSS by the designer community is that CSS 2.x lacks quite a few features that are important to designers, examples are alpha transparency, round borders, anti-aliasing, cross browser groove|ridge|inset|outset borders, gradients, layout, font embedding, multiple backgrounds per element etc. For good reasons CSS 2.x has largely been closed to new features since before 1998 when the CSS 2 spec achieved REC status, which might explain a certain lack of features.
The lack of forward momentum with regard to addressing CSS specification issues and missing functionality has resulted in doubt on whether CSS is truly the right way forward. This has led a not insignificant number of people to look for other technologies to provide them with what they want.
Developing a technology that is able to keep up with market requirements requires a driving force, there is very little of that within W3C. Browser manufacturers have contributed little resources to the advancement of CSS.
Designers are not hammering W3C with feature requests, they are in fact not part of the process of developing CSS, due in no small part to the culture differences between designers and technicians.
Potentially as a result of the former there is also the question of whether the W3C CSS working group sufficiently understands design and what matters to designers.
Screencap; rendering of border-radius.
Take for example the border-radius property from the 2005 Draft CSS3 Backgrounds and Borders Module; any designer would be horrified by round borders not being anti-aliased, yet the draft proposal doesn't even mention it, let alone require browsers to implement this. The result is predictable, designers will continue to use images for something that should be handled by CSS.
I don't believe that the answer lies in teaching designers how to code, or teaching coders how to design. In my experience the better the designer, the worse he or she is likely to be at coding, or even understanding and respecting coding issues. Similarly, the better the coder, the worse he or she is likely to be at designing.
East is East, and West is West, and never the twain shall meet.
An artistic talent and a technical talent rarely happily coexist in the same person, hence sites made by designers are often poorly coded, and properly coded sites are often bland to look at. Needless to say that there are people who are decent designers who are also decent coders. But really good designers who are also really good coders are a rare exception.
Key to an overall high quality result is to recognise and accept that to achieve a high level of skill in either field requires different personality types (something to do with left versus right brain halves I imagine). We shouldn't burden either group with a task that they are not really equipped to perform. Instead we should encourage both groups to specialise in their respective field.