Highlight Microformats with CSS
Those that use Firefox with the Tails extension, read no further. This is not for you. You have it given to you on a plate, you don’t know how lucky you are. This is for those of us using Camino, Safari or Omniweb.
After I mocked up an image of how Microformats detection might work in Safari, I started looking at the tools there were available. While there wasn’t anything that handled detection, Tantek did release his bookmarklets to allow hCard and hCalendar information to be exported from a page. Nothing in the region of Tails where you could view a list and choose which contacts/events you wanted, but it worked. This just left some way of handling detection, until I came across Chris Casciano’s script for NetNewsWire to Extract Microformats. It was a simple solution too – use css to style .vcard and .vevent classes differently.
So I’ve knocked up one of my own as a starting point. Here it is in action on Adactio, a rich harvest of microformats to be highlighted:
Here’s the file to download: expose-mf.css
It may work better with some designs than others. So far, I’ve not come across any problems where it renders a site unreadable, but it could easily happen. This just highlights hCard and hCalendar, but easily be expanded to things like XFN and show attributes. This is something I might update as time goes on.
A wee CSS note: I’ve put in a border-radius property for those using the latest WebKit. For Camino folks there’s a -moz-border-radius of course.
Using it in Camino
Copy and paste the css into your userContent.css file found in username/Library/Application Support/Camino/chrome/. Restart Camino. If for some reason you did want to use this with Firefox, the instructions (for the Mac) are the same.
User scripts functionality is planned for a future version of Camino, so hopefully this will open better ways of dealing with Microformats.
Using it in Safari
Put the css file anywhere you like (your username/Library/Safari/ folder might be a good place) and then select it in Preferences > Advanced > Style Sheet. Restart Safari.
Using it in Omniweb
Again, put the css file anywhere you like, and then select it in Preferences > Appearance > Style Sheet. No need to restart, just refresh.