An experiment with INS and DEL

In what, lately, is almost becoming a regular series, I've put together an experiment. This time in presenting INS and DEL.

If you've taken a look at the example, you'll notice that there are two shiny buttons that allow you to show and hide the insert and delete information embedded in the page. For those who aren't aware of the INS and DEL tags, they are used to indicate that changes have been made to the page after the fact. A good example of this would be those times where you made a typo in a blog post and go back to change it. You could mark it up using either the INS and DEL tags to let your readers know what was changed.

The default styling alone is fairly hum-drum. Normally, the INS is displayed with an underline and the DEL is displayed with a strikethrough. What I've done with the example is to loop through the document (using JavaScript), locate any changes and then create a new DIV within the page and copy the contents of the element into the DIV. A little CSS magic and things start to look alright.

These revisionary tags have two attributes: cite, for specifying a URL that would explain the revision, and datetime, for specifying when the change occurred. To actually make use of this information, I pull it out and insert it as part of my newly created element. Voila! Instant change tracking.

Published May 05, 2005 · Updated September 17, 2005
Categorized as HTML and CSS
Short URL: https://snook.ca/s/361

Conversation

4 Comments · RSS feed
Jehiah said on May 06, 2005

Nice Work, I could also see this being used with the Fade Anything Technique to just fade the insert/delete blocks from red/green to plain text. Your markup does give some functionality that reminds me of the track-changes feature in Word. Now if you could manage those pesky red lines you'd have made it

;-)

Jehiah said on May 06, 2005
Mark Wubben said on May 09, 2005

You might want to show which text changed in the document as well... make it bold or something.

Jonathan said on May 09, 2005

Mark: That would be extremely easy to implement. One thing that I didn't go into any detail on was the actual implementation. To expand on that now, when looping through all the elements, I apply a class to the INS/DEL elements. Therefore, to have it highlight the change would be as easy as changing the stylesheet.

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.

Want to learn about scaling CSS for large projects?

I'm available for full and half-day workshops on scalable CSS architecture. I can provide on-site training for your team. Interested?
Get in touch.