On the weakness of CSS

posted 06 March 2005

The CSS Zen Garden is intended to be an example of the power and flexibility of style sheets as a design tool, and a demonstration that the goals of CSS can be achieved, namely the separation of content from presentational code, while still producing attractive results. And largely, it achieves this: the layouts on CZG are varied and frequently beautiful. But on another level, it is also a demonstration of CSS's weaknesses as well.

For example, look at the content boxes on Planet Seldo. They have visual elements around their borders, that stretch to fit the size of the box, both vertically and (if you resize your window) horizontally. This is known as a "stretchy" layout, and it is generally considered a desirable thing in web design because everybody's screens are different sizes and people can change their window size at will. The stretchyness is achieved by a little CSS trick of defining a background image for the content box (a DIV tag) that is quite large: only the part that fits within the size of the box is displayed.

Unfortunately, this means there is no way to define stretchy elements for all four sides of a div if that div is all you have, because a div can have only one background image. Thus, you have to attach the background images to other elements, e.g. the header tag at the top, or in the case of PS, the date at the bottom of each entry, or both. CZG does this as well: the layout is full of empty divs called "extraDiv1", "extraDiv2", etc..

There's no reason that should be the case. It's just a weakness in the design of CSS. You shouldn't have to add extra elements to your (semantic) HTML in order to produce a (presentational) CSS effect. And this reliance on extra elements has nasty side-effects.

One of them is caused by the fact that the extra elements don't automatically end up being the same size as the containing element. So designers get around this by manually setting both the container and the contained element to the same width. As a result, the layouts lose their "stretchiness": practically all the CSS Zen garden designs (except, it must be pointed out, the very first one) are designed with fixed-width layouts.

All of which is disappointing, and shows that web technology still has some way to go before it can be considered a mature medium for graphic design.

tagged with