Polar Bear Lamps

I'm just going to assume anyone reading this is perfectly aware of the current state of CSS3 and its varied support across various browsers. One heavily-desired feature that isn't widely supported is multiple background images. The biggest advantage to multiple background images on a single container is of course being able to add visual flair without requiring extra, useless containers.

Here's where our friends, :before and :after come in. It may not be incredibly common currently, but there is a lot of use of these selectors to add extra text-based content that isn't necessarily important for accessibility or search rankings. This could be for commas to break up some content visually (as demonstrated after my name in the header), or brackets for decoration. There's also wide-spread use of :after for the purpose of self-clearing floats. Why not use it for more?

Maybe I'm late to the party, but I hadn't seriously thought of using these selectors for layout before. I was working on a project earlier this year that involved a master blog, and multiple sub-blogs. All of these shared the same layout but had unique color schemes. The various color schemes went beyond just text, and involved some of the graphics as well. Of course, no project goes perfectly and I had forgotten to cut up multiple versions of a background image to apply to each sub-blog. Frustrated, and not wanting to increase the bandwidth requirement for the site as a whole, I tried to think how I could create these color variations purely with CSS. It would also need to function across all major browsers, including IE6. Out of a rich combination of laziness and unbridled creativity fueled by childhood marathon sessions of MacGuyver, I decided to use the :after selector on the body tag to add my desired stripe of color. This is a fairly easy effect to accomplish. I created my initial styles then have a class applied to each blog to target them and make the appropriate color adjustments.

But, wait! Anything older than IE8 doesn't support a majority of CSS3 selectors! That's true, but there are a lot of scripts available that provide support for these selectors in legacy versions of IE. Two that I use are Dean Edwards' IE7 js and ie-css3 from Keith Clark

Now, onto some other examples. For ease of demonstration, I'm going to use my own site as the reference. The two significant cases to look at are the circle background sitting in the upper left of this site, and my blockquotes. The circle background isn't a graphic at all, but just a variety of styles applied to the :before pseudo-selector. The styles for this are as follows:

There are only two rules here that are crucial. These are display: block; and content: "";. The selector needs to be set to display as block in order to give it dimensions and you need to give it some content in order to generate it as a container. Any other layout styles will work as if it were a normal container. Be aware that both :before and :after are still children of the container in context and you'll need to give the parent a position rule in order to keep things in the proper context. I also personally use :before and :after in a hazy relationship to position. If you have a graphic on top of a container and one on the bottom, it makes sense to apply the one on top via :before and the bottom via :after. If you want to have heavily stylized text, you'd simply input whatever you want into the content rule. This is what I use for my blockquotes.

This is what I use for my blockquotes

Instead of giving dimensions to blockquote:before, I simply style it as normal text but give it plenty of design elements to make it stand out. It's important to remember that special characters will need to be escaped with a backslash. The content is just a standard HTML character code for an open quote and works well because it doesn't require direct editing to the markup to create the effect, but also won't negatively impact users if it doesn't exist. If your browser can't display it, no harm done. For supporting IE, you'll want to actually directly copy/paste special characters into the content rule rather than using the HTML character code as it won't properly escape. This means you'll end up with content: """; instead of content: "\201C";. This will work fine in modern browsers as well, but it seems smarter to do it the proper way and patch IE selectively. Sorry, IE users, I haven't implemented any patches for you yet. To be fair, my target readership isn't the type to use IE as their primary browser.

There's not much more to it than that. Obviously, the CSS3 styles from my examples won't work in older browsers, but with javascript to add selector support, everything else functions normally. I've used this method successfully in all major browsers back to IE6. If javascript isn't available, then it won't work but you also won't have any errors tossed at you. As long as the design elements aren't mission critical then users can live without it just fine. Basically, use your multiple background images on a single container now! Don't wait! This method isn't a hack and won't degrade once more browsers support multiple background images, but it still would be totally fine to include this method only in patch stylesheets. Do you still love CSS? I know I do.