Simian Design

November 13, 2003

Cite your blockquotes

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. Okay. First we have to go into CSS2 a little bit, and delve into attribute selectors. They are most cool. You all know how we identify from CSS various classes and ids. Well, with CSS2 we can also select attributes from a tag. Now, if you think about this for a little bit, it becomes very obvious that this is very very powerful. The downside? IE doesn't recognize it. And won't be able to enjoy it until 2006 or 2008 or whenever. Thanks Microsoft. For example, we could take the following CSS: A[href="http://www.w3.org/"] { color: #000; } This will take ANY link that points to http://www.w3.org/ and give it a color of black. This will do that ONLY FOR THOSE LINKS. Cool eh? Another CSS2 attribute we're going to use is :after. Actualy, this is a psuedo-element. This allows us to insert generated content before or after the declared elements content. Got that? Okay, so what we have so far is thus: blockquote[cite]:after { } Which will tell the browser to render stuff after any blockquote with a cite attribute. But how do we get the URL written in there? We turn to the content property. Content can be a string, URI, counter, or an attribute. It applies ONLY to :before and :after pseudo elements. So by writing this into our CSS declaration content: "Quote from: " attr(cite); you'll see that the text "Quote from: http://www.foo.bar" written across the bottom of your blockquote. Additional styling is easy enough. (the following example won't work if you're using IE. )

This function returns as a string the value of attribute X for the subject of the selector. The string is not parsed by the CSS processor. If the subject of the selector doesn't have an attribute X, an empty string is returned. The case-sensitivity of attribute names depends on the document language. Note. In CSS2, it is not possible to refer to attribute values for other elements of the selector.

Attached for display are my full blockquote styles.

blockquote[cite]:after {
	content: "Quote from: " attr(cite);
	display: block;
	border-top: 1px solid #999;
	color: #999;
	margin: 1em 0 0;
	padding: .5em 0 0;
	font-size: .8em;
	font-weight: bold;
	}
blockquote {
	background: #eee;
	margin: 20px;
	padding: .5em;
	margin-top: 0px;
	border: 1px dotted #999;
	}

Post Info

Tagged As CSS, Reference

Comments are Open (5)

Posted at 11:29 AM