When to use CSS generated content

There’s often a misunderstanding about CSS generated content, which most likely comes from the fact it’s called ‘content’, when designers are used to thinking of the term under the context of the ‘three tiers’ of the modern web: XHTML (content), JavaScript (behaviour), CSS (display). The trouble is that CSS generated content isn’t ‘content’ in the same manner as that.

CSS generated content should really serve only two purposes:

De-obfuscating existing content. e.g., making the otherwise hidden href attribute visible on a print style sheet¹.
Adding purely graphical content where there is no semantic skeleton (I use this technique to create none-square image thumbnails on my own site. If you’re interested in learning more about that take a look at my 2006 re-design notes)

CSS generated content shouldn’t be thought of as adding semantic content. If that CSS generated content conveys meaning (i.e., it has semantic value), then it belongs in the HTML, not the CSS.

Footnotes

This could be achieved as follows:
1. a:after {
2. content : ” ( URL: ” attr(href) ” ) ”; }
^back

Entry Information

Posted:

Wed, 23rd Aug 2006 at 19:08 UTC

Filed under:

Web Development

Tags:

Archived entry | Matt Wilcox .net