Multiple Backgrounds: Oh, What a Beautiful Thing.

The current spec for CSS3 includes support for multiple backgrounds in the background property. This is going to be fantastic for semantically-minded CSS developers. Many of the extra hooks that get thrown into HTML are there only to help out extra background images.

Think about this common technique for blockquotes.

<blockquote><span>
This is some blockquoted text.
</span></blockquote>

The extra span in there is completely un-semantic, but it is often used so that you can get an extra background image in there. One for the quote mark in the upper left and one for the quote mark in the lower right:

[img_assist|nid=349|title=|desc=|link=none|align=center|width=500|height=149]
Blockquote example from here.

With multiple backgrounds the extra hook is not needed. You can apply both the upper left and lower right image both to the blockquote element. Here is what the CSS will look like:

blockquote {
  background: 
    url('left.jpg') top left no-repeat,
    url('right.jpg') top right no-repeat,
    url('middle.jpg') top center repeat-x;
}

Notice you can set both the location and how it will repeat in each of the comma-separated backgrounds. I like the clean syntax of this, but it does present a problem. It is not backwards-compatible whatsoever. Older browsers that are not supporting this will just see no background at all, instead of for example, just the first image which would make sense. That means we can't just start using this in a forward-enhancement movement, unless we declare browser-specific stylesheets for the browsers that support it. At the time of this writing, only Safari is supporting multiple backgrounds.

Here is a link to a quick example of some buttons utilizing multiple backgrounds in order to shrink and grow seamlessly. Remember, Safari-only right now. Remind you of anything? Sliding doors. Multiple backgrounds completely absolute sliding doors.

Better semantics... No more complicated work-around techniques.... Oh, what a beautiful thing.