Automatically Cite your Quotes

Okay, Derek, here’s a bit more “hard-core” :CSS: trickery just for you.  Web-graphics.com 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.

Posted Friday November 14, 2003 in (X)HTML and CSS by Chris Curtis

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.

Comments

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

By Derek Jones on November 15, 2003 at 09:46pm 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…

By Chris Curtis on November 16, 2003 at 06:35pm link

Leave Your Comment