Automatically Cite your Quotes

Okay, Derek, here’s a bit more “hard-core” :CSS: trickery just for you. linked to this really cool idea to use CSS to automatically display the citation source for a blockquote.  It works in Gecko-based browsers and probably in Safari, but not in :IE:, though it degrades fine.  See here:

Blockquotes. This is an element, according to the :W3C:, that is to be used to designate quoted text. We are going to use CSS and the attribute cite to achieve an easy way to attribute quotes.

This is a pretty slick little trick.  The link above explains the idea better than I probably could (at least without just saying everything again).  There’s no reason you couldn’t use the :before pseudo-class instead or even try pulling in content from a blockquote’s “title” attribute using

content: attr(title);

You might also notice that the above quote didn’t show the citation because I didn’t add one.

This is an older entry and as such, it may be by a guest author or contain formatting problems / extraneous code. If you notice something wrong with the entry, please use the Contact page to let me know the entry title and issue.


Eh, thanks, mate!  Very slick.  Wouldn’t it be more useful if the citation quote were (where applicable) a link?

Yeah, that would be more useful, but unfortunately you can’t do that.  Heck, you may notice that you can’t even select the text… which, I’ll admit, makes the feature a fair bit less useful.

That’s all browser limitation, though, so if the browsers get smarter…

Leave Your Comment

Commenting is not available in this weblog entry.