generated content pt3/finishing up

basics revisited

The first thing that many of you noted about the navigation example I provided was that you could just as well use a border to replace the generated content. Although I don't quite agree you can do it "as well" without messing up your css, it is a definite possibility and it has the added value that it will scale when you increase the font size. Still, this works only for the cases where you want to replace a pipe symbol. If you consider a "more >>" link, there is no such option.

Other people remarked that there was a gray area where such symbols could be considered content after all, as they provide structural information (cfr a breadcrumb, where the ">" symbol indicates a lower level). I don't agree with this kind of reasoning at all. Content is content, structural and relational information is provided by the html code. For a broader explanation you can look at the article I wrote for the WPDFD, which further explains my ideas.

Finally, I asked a question myself, concerning the way screen readers should handle css generated content. I was referred to Steven Faulkner who is somewhat of an expert in the field of screen readers and he pretty much told me what I needed to know. Currently, support by screen readers for generated content is minimal, and (important) text content shouldn't even be in css anyway. He also provided me with a link, which proved a nice read. Thanks for the help Steven!

one final trick

As promised, there is one more trick to learn concerning css generated content.

I already explained how you could insert static content into your documents when the content is used as a visual indicator. All that with one simple line of css. But static content is not the only thing we can insert.

In css you can call on the attributes of the tag you're addressing. The use for this technique is limited, but it can be helpful in some rare cases. The code above shows the syntax for doing this. It's also possible to combine dynamic and static input, which does give you some flexibility. In the example above, we're taking the href attribute of the link element and we're placing it behind the link. To separate it further from the link, we've added opening and closing brackets.

This technique is sometimes used when printing, so people don't lose the link information when they print a page. I'm not a big fan myself (as it can seriously clutter a text) but in some cases it can be useful. Personally, I'd rather use the javascript technique where all links are lifted from a print page and collected at the end of the print.

There are some other possible uses for this technique, but none of them seem very valuable. For example, you could lift the alt attribute from an image and make it into an image caption. That said, the function of an alt and caption are slightly different, so I wouldn't recommend it myself. The other idea I had was to lift the maxlength attribute from an input field, sadly that didn't seem to work on any browser I tried.

Any more ideas are surely welcome, because this is the best I could come up with (which isn't much to be honest).

and so ...

And so that's it for my ramblings about css generated content. It's a nice concept that will hopefully prove useful in the future, when all browsers properly support it. Until that time, don't forget it exists and try to come up with some solid uses yourselves. And share, of course!