It’s no question that if you’ve ever used CSS before, you’ve come across the single background-image limitation. This causes many people to alter their markup to accommodate design, which defeats the purpose of XHTML. Thus, we see divs wrapped around all sorts of block-level elements, their only purpose being to provide an additional background image for the element that they contain. Alas, even web standards gurus have come to realize that, at least for now, some containers are necessary to survive in a world that is spoiled by special effects.

The Future of CSS

Thanks to the hard working folks at the World Wide Web Consortium, CSS3 promises the ability to stuff multiple background images into one element. According to the CSS3 Backgrounds and Borders Module (Working Draft 16 February 2005), the method for applying multiple background images looks something like this:

background-image: url(a), url(b), url(a), url(b), url(a);
background-position: top, right, bottom, left, center;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;

As easy as it is to code this up, it’s a shame that this upcoming standard wasn’t solidified in an earlier CSS specification.

Looking Forward

Support for CSS3 right around the corner?

It may be a few years before the mainstream browser world starts supporting CSS3 features such as the one mentioned above. As of now, it would be completely unheard of to attempt to use something like this on anything but an experimental website. Fortunately, with the browser wars behind us, software makers have shown significant improvements in updating their browsers to comply with web standards. This is especially true in the case of CSS. Although Internet Explorer, Firefox, and Opera don’t currently support very many CSS3 features (if any at all), there is one browser maker that jumped the gun and began paving the way for highly anticipated features such as those promised by CSS3: Apple.

Even though Safari has only been around since 2003, Apple’s development team has done an incredible job getting it to comply with web standards. They’ve even gone as far as implementing a number of anticipated CSS3 features. With the recent introduction of Safari for Windows and a full version of the same browser shipping with millions of iPhones later this month, could Safari have a positive effect on other browser makers and encourage some of these new features quicker? I certainly hope so.

Some Common CSS Design Effects

Let’s look at some popular CSS effects that people mutilate markup to achieve. Visually, there is no difference between the CSS2 method versus the CSS3 method, but pay close attention to the XHTML and CSS code throughout the examples. Also, keep in mind that I’ve minimized the code for demonstration purposes, so things like paddings, margins, fonts, and background colors aren’t accounted for. I’ve also reduced the lorem ipsum text to briefer descriptions for each example.

Here’s an example of what each effect will produce:

The CSS2 Mentality

Rounded corners

Rounded corners are a subtle way to break out of the blocky layouts that many CSS pages have. Since this effect is most commonly achieved using background images, designers familiar with CSS2 know that they may be dealing with up to four containing elements:

<style type="text/css">
    .container-1 {
        background: url(top-left.png) top left;
    }

    .container-2 {
        background: url(top-right.png) top right;
    }

    .container-3 {
        background: url(bottom-left.png) bottom left;
    }

    .container-4 {
        background: url(bottom-right.png) bottom right;
    }
</style>

<div class="container-1">
    <div class="container-2">
        <div class="container-3">
            <div class="container-4">
                This is a rounded box
            </div>
        </div>
    </div>
</div>

Of course, if the element had a fixed width or height, the number of containers could be reduced to as little as two.

Block quotes

Blockquotes present another issue when designers desire elegant, oversized, opening and closing quotation marks around them:

<style type="text/css">
    .quotes {
        background: url(open_quote.png) top left;
        padding-left: 50px;
    }

    .quotes DIV {
        background: url(close_quote.png) bottom right;
        padding-right: 50px;
    }
</style>

<blockquote class="quotes">
    <div>
        This is a blockquote
    </div>
</blockquote>

Drop shadows

The drop shadow effect is rarely used in this manner because of two reasons. First, until the release of IE7, PNG alpha-transparency was not supported in Internet Explorer. This limited the use of drop shadows on fluid elements to solid colored backgrounds. Second, fluid elements can require as many as five containers to produce a professional effect:

<style type="text/css">
    .container-1 {
        background: url(bottom-left.png) bottom left;
    }

    .container-2 {
        background: url(bottom-right.png) bottom right;
    }

    .container-3 {
        background: url(top-right.png) top right;
    }

    .container-4 {
        background: url(bottom.png) bottom;
    }

    .container-5 {
        background: url(right.png) right;
    }
</style>

<div class="container-1">
    <div class="container-2">
        <div class="container-3">
            <div class="container-4">
                <div class="container-5">
                    This is a div with a drop shadow
                </div>
            </div>
        </div>
    </div>
</div>

A more logical way

Thanks to Safari we can take a look at the same effects in a CSS3 world, which means a lot less unnecessary markup.

Rounded corners

With a little extra CSS and a lot less markup, we achieve the same rounded corners:

<style type="text/css">
    .rounded-corners {
        background-color: #006600;
        background-image: url(tl.png), url(tr.png), url(bl.png), url(br.png);
        background-position: top left, top right, bottom left, bottom right;
        background-repeat: no-repeat;
    }
</script>

<div class="rounded-corners">
    This is a rounded box
</div>

Blockquotes

Again, with one container and a little extra CSS, we minimize the markup and produce the exact same effect:

<style type="text/css">
    .quotes {
        background-image: url(ldquo.png), url(rdquo.png);
        background-position: top left, bottom right;
        background-repeat: no-repeat;
    }
</style>

<blockquote class="quotes">
    <p>
        This is a blockquote
    </p>
</blockquote>

Drop shadows

The CSS gets a little more complicated for the drop shadow but, again, the markup is minimal:

<style type="text/css">
    .drop-shadow {
        background-image: url(shadow-tr.png),
            url(shadow-br.png),
            url(shadow-bl.png),
            url(shadow-r.png),
            url(shadow-b.png);
        background-position: top right,
            bottom right,
            bottom left,
            right,
            bottom;
        background-repeat: no-repeat,
            no-repeat,
            no-repeat,
            repeat-y,
            repeat-x;
    }
</style>

<div class="drop-shadow">
    This is an example of a drop shadow
</div>

Here in the Real World

I guess the most exciting thing about having more flexibility with CSS is the fact that you can eliminate unnecessary markup. This makes the development process a lot easier and increases your websites ability to stay “future-ready”. Of course, I wouldn’t recommend relying on this technology yet, but thanks to Safari we are able to get a glimpse into the future of CSS, and so far it looks very promising.