A clever bit of CSS

A while ago, I was directed to this prototype for the mozilla.org redesign, notable particularly for it’s use of an intelligent, fluid grid. I bookmarked it within a folder I keep for quick design inspiration, since there are several aspects of the design that I think are pretty great. Looking at it again the other day, I discovered a clever bit of CSS coding.

I’m pointing to the bullets separating the links in this menu. The anti-aliasing gave away the fact that they were images, not “text.” Frequently, sites will use a pipe (“|”) to separate links like these. In these cases, the pipe is either separated from the link with regular old spaces, or appended using :before or :after. Not semantically ideal. Some sites I’ve seen have placed the separators (be they bullets, pipes, or otherwise) in separate <li>s. Definitely not semantically strong, though I admit that I’ve turned to this approach before, even after semantic enlightenment. The key advantage is that there’s no need for :first-child and/or :last-child to avoid placing spacers to the left of the left-most link or right of the right-most. Other sites recreate the same effect using the CSS border property (along with padding for spacing). Much better, but limited.

But Happy Cog (I think this was done by Happy Cog) did something else here: they used a background image, positioned in the left of each <li>, along with padding-left to separate the link text and the bullet.

Here’s the (relevant) code:

#utility li {
background: transparent url(/i/screen/bullet_utility.gif) no-repeat scroll 4px center;
padding-left: 14px;
}

I see myself turning to this approach in the future.