Ways CSS Is Poorly Designed, part 1

/ Sandy Smith

Why can’t I put multiple background images on a single div?

div#myNiftyDiv
{
background: url(/images/topleft.gif) no-repeat top left;
background: url(/images/topright.gif) no-repeat top right;
background: url(/images/bottomleft.gif) no-repeat bottom left;
background: url(/images/bottomright.gif) no-repeat bottom right;
}

The above should give me a nice rounded corner for a colored box, and degrade nicely for agents that don’t support it. I could do more with a z-index property:

div#myNiftierDiv
{
background: url(/images/topgradient.gif) repeat-x top left z-index(1);
background: url(/images/repeatingpattern.gif) repeat-y z-index(0);
}

That would give me a nice gradient on top, possibly an alpha-blended png, and a repeating pattern down the body.

You can do these things currently in CSS, but you either have to place non-informational images in the div or use lots of non-semantic divs, or hard-code the width and height and sometimes position of the div while serving up a huge image, a la CSSZenGarden.

So really, who in 1999 when CSS 2 was on its way didn’t just look at the way tables were being used and think to themselves, “Hey, let’s make sure we can do all of this with our nifty new structure”? It’s not like I started encountering curved designs two years ago.

4 thoughts on “Ways CSS Is Poorly Designed, part 1”

  1. “or hard-code the width and height and sometimes position of the div while serving up a huge image, a la CSSZenGarden.”

    Presumably if the non-corner regions of your image are just a flat region of color (which it sounds like you’re describing), they should compress down nicely in the process of optimization. And it does make more sense from a semantic perspective to say “here’s an image, put some text on top of it” (non-visual UAs knowing to just ignore the image) than it does to create DIVs with lots of images on the edges.

    A bonus is that this lets you do things like the sticky note on this Zen Garden example:

    http://www.csszengarden.com/?cssfile=/095/095.css&page=1

    … which would be impossible with styled DIVs alone.

    Like

  2. But that sucks donkey balls from a usability standpoint. What if I have a small screen? Why can’t the text nicely collapse? Or what if I like a large screen? What if I want to change the font size? What if I want to display some of these elements on some really small screens of variable size?

    “And it does make more sense from a semantic perspective to say “here’s an image, put some text on top of it” (non-visual UAs knowing to just ignore the image) than it does to create DIVs with lots of images on the edges.”

    From a semantic point of view it’s six one way and half-dozen the other. You either have some block-level element with text and some image CSS that non-visual UAs ignore (my solution), or you have some block-level element with text and one image in CSS that non-visual UAs ignore (ZenGarden’s solution). The (X)HTML looks identical.

    Currently, if you want to do it flexible width and height, a la http://aidsmediatempstage.forumone.com/ (URL probably won’t last, but imagine a flexible-width box with rounded corners), you have to use at least 4 extraneous divs (six in my case, because I wanted to use CSS borders instead of background images on the top and bottom). With a more logical design of CSS, I’d only have one div.

    Like

  3. Oh, and there’s nothing in my imaginary model that would prevent you from doing the sticky-note–except that for slower connections you could have four smaller images and a solid color in the middle instead of being forced to do it in one image. But you could do it in one image, too, there’s nothing stopping you.

    Like

Comments are closed.