More Microformats Highlighting

As well as some tweaks and improvements to my first attempt, I’ve added highlighting of XFN attributes to the list. I’m too lazy to do the XFN thing, but others seem to like it. Maybe one day.

It works by revealing the relationships when hovering over the name, like this (again, taken from adactio)

Animation of XFN highlighting

There is a caveat. This is only CSS, and apart from having the potential to mess up some site layouts, can only work when the author has added a class of “n” or “fn” to the link (as used in hCard). Otherwise, it would go about showing all sorts of rel attributes that wouldn’t be quite so interesting (such as ‘alternate’).

After trying out all sorts of complicated styling, I’ve decided to keep this all as simple as I can bear, so as not to mess things up too much. Do leave feedback if there is anything you want adding! In particular, I’m looking for feedback on whether to use ‘vCard’, ‘Contact’, just an address book icon, or just a microformats icon. What would be the most useful and understandable?