css Zen Garden; The Road to Misconception

Illusions

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.

New problems

Content being obscured

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.

Oversell

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.

Adoption

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.

Never the twain shall meet

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.

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.