Highlight Microformats with CSS

14 Sep 2006

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:

Example of the highlight microformats css in action

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.

Recent Posts

Troika #33: Endings

18 Feb 2019

Identity Design discussion on Elastic Brand podcast

23 Jan 2019

Using the iPad Pro as my main computer

07 Jan 2019

Hicks' top albums of 2018

22 Dec 2018

Hicks Studio Clearout!

17 Dec 2018

New Identity for iHasco

13 Nov 2018

Leigh and Jon did Inktober

01 Nov 2018

We are Oxvik

15 Oct 2018

The Hicks Logowall

05 Oct 2018

Instagram Hickstagram

  • 14 Mar 2019

  • 12 Mar 2019

  • 10 Mar 2019

  • 03 Mar 2019

  • 02 Mar 2019

  • 25 Feb 2019

  • 24 Feb 2019

  • 24 Feb 2019

  • 23 Feb 2019

  • 18 Feb 2019

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom