Presentation Issues with the cite and datetime attributes of the del and ins elements

As I note in the book, the cite and datetime attributes of the del and ins elements are curious in that they add value to your content, but browsers don't readily expose the information to users.

To see what I mean, try this example in a browser.

Example:

	
	<h3>Tomorrow's Showtimes</h3>
	<ol>
	<li><ins>2 <abbr>p.m.</abbr> (Another show just added!)</ins></li>
	<li><del datetime="2010-03-03T10:16:15-05:00">5 <abbr>p.m.</abbr></del> 
	      <ins>SOLD OUT</ins>
	</li>
	<li><del cite="http://www.hot-ticket-plays.com/show-sells-quickly/" 
	      datetime="2010-03-02T10:10:14-05:00">8:30 <abbr>p.m.</abbr></del> 
	      <ins>SOLD OUT</ins>
	</li>
	</ol>
	

Here's that list code rendered:

1. 2 p.m. (Another show just added!)
2. 5 p.m. SOLD OUT
3. 8:30 p.m. SOLD OUT

You'll notice there's no visual cue indicating the availability of either the datetime or cite information. Furthermore, hovering the mouse pointer over the text reveals nothing, and you can't navigate to the cite URI. Firefox at least makes the information available if you right-click the del or ins and choose Properties. But, how many users know about that?

Possible Solutions

So, what to do? Well, there are a few routes—some easier than others, some cruder, and none that are ideal.

One option is to add a title attribute to tip off the user, such as this:

Example:

<del cite="http://www.hot-ticket-plays.com/show-sells-quickly/" title="View source for link to reason for this change">8:30 <abbr>p.m.</abbr></del>

Another approach is to use some advanced CSS to display the attribute values. Some developers choose to do this in their print style sheet, though you can include it in your screen (that is, "normal") one, too. The results with the following sample code won't be pretty, but the point here is to demonstrate the feature. Not all older browsers support this.

	/* display cite and datetime values (assumes you've included both) */
	del[cite]:after, ins[cite]:after {
		content: " (More info: " attr(cite) " | (Time of change: " attr(datetime) ")";
	}
	
	/* turn off underline and strikethrough (if so desired) */
	del, ins {
		text-decoration: none;
	}

Please note that with that CSS the cite URI will render as static text, not a link.

Lastly, though I won't get into the details here, another option is to use JavaScript to display the information and even create a link. If executed well, this would be the most elegant approach, though I'd encourage you to provide one of the others as a default in case the user doesn't have JavaScript enabled.