css generated content pt1
One of the things that had me bothered for a while were visual separators. Whenever I got a design, there were always some silly pipes or > signs that were added to visually separate elements in a horizontal list. I'll try to explain why I think they are so bothersome, and what options we (are supposed to) have to implement them as good as possible.
why it bothered me
The problem with these separators is that they are in fact simple characters, but they don't belong in the source of the document because they function as visual separators. When you put items in a list, those items are already separated by the li tags. So when you decide to add visual separators, they should be defined in css. That's where all design elements belong after all. On the other hand, cutting 1px pipes in PhotoShop is not really fun either.
My blog made the problem even bigger. Not only did I have to cut the characters into images, I had to make them three times (for each section a different color). And whenever I should choose to change one of my base colors, it means redoing a whole lot of images.
And so the challenge was to find a way to define those separators in css without cutting them as images.
finding the tools: the content property
{content:"|";} First off, I needed a way to insert characters into the design through css. This might sound like a contradiction, as css was built to do exactly the opposite (separate content from design). Point is that these characters are not content and shouldn't be considered as content. These characters have a single design purpose, and generating them from css as actual content gives us the advantage that they can be styled.
You might already know the content property from elsewhere. It's used in the notorious clearfix class, which was the first time I came across this property. I never quite understood why they should want to insert content through css, but this is probably a very good reason to do so.
Now that we know how to insert our content, we still need a place to insert this content into. So on to the next bit.
finding the tools: the pseudo-elements
li:before {content:"|";} li:first-child:before {content:"";} Our content property will only work with pseudo-elements. Which is no big deal, as this is exactly what we need. If you consider the code above, you'll see that this is all the code you need to provide a horizontal list with separators between each element. A very simple and elegant solution.
The biggest gain is that we can now simply style the pipe characters in css. We can change font and text properties to style it the way we want it, keeping all the styling power in the css file.
As for my blog, it meant writing two lines of css code and three lines to differentiate between the colors for each section. A whole lot easier than cutting from PhotoShop files, and a lot easier to maintain too.
You can check out the testpage if you wish to see it in action.
the bad and the ugly
You might be wondering why this technique isn't more widely spread, but I'm sure you can already guess the answer. IE does not support both pseudo-elements, so there's no way to apply the content through css. You can still use this method for Firefox, Safari and Opera and apply the images through the IE-only stylesheet (which is what I've done). But in the end this means even more work and even more trouble maintaining everything, so it has little real-life use I'm afraid. Yet.
the good
Still, I think this is an important technique worth knowing about. IE dominance is slowly fading, IE8 will support pseudo-elements and by the time the other versions have faded completely you should have no trouble switching to the better technique.
Working like this gives you some serious benefits and flexibility, so let's hope we can start using this technique as quickly as possible.