[{"_1":2,"_31":-5,"_32":-5},"loaderData",{"_3":4},"routes/__layout/tag.$name",{"_5":6,"_7":8},"tagName","layout","posts",[9],{"_10":11,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":23,"_24":25,"_26":-5,"_27":28,"_29":30},"id",525,"title","On the weakness of CSS","excerpt","CSS can't apply multiple background images to a single element, forcing designers to litter their HTML with empty, semantically meaningless divs just to achieve visual effects. The CSS Zen Garden proves the point: nearly every layout there is fixed-width as a direct result of this limitation.","body","\r\n\r\n

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.\r\n\r\n

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.\r\n\r\n

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..\r\n\r\n

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.\r\n\r\n

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.\r\n\r\n

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.","updated",["D",1110124123000],"created",["D",1110124123000],"codename","on_the_weakness_of_css","legacy_id","3182","thumbnailUrl","published",["D",1110124123000],"draft",false,"actionData","errors"]

Posts tagged “layout”