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

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

Hiding Away

16 Sep 2018

Biro sketch of Lauzerte

23 Aug 2018

Instagram Hickstagram

  • 13 Jan 2019

  • 05 Jan 2019

    Just tried the Vegan Sausage Roll from Greggs. Really good - nicer than the meat one, and the thought of Piers Morgan frothing at the mouth makes it even tastier

  • 30 Dec 2018

    Blackbird studies #ipadpro #procreate

  • 27 Dec 2018

    My special egg plinth from @maanthh. You have to say the name in the style of Matt Berry in the IT Crowd ✊

  • 26 Dec 2018

    This is my Pencil. There are many like it, but this one is mine. #applepencil

  • 25 Dec 2018

    Christmas reading πŸ€—

  • 24 Dec 2018

    Hope you all have a very Happy Christmas folks! πŸŽ„πŸŽ‰πŸΈ

  • 22 Dec 2018

    The moon tonight was full and large. Taken through a spotting scope with iPhone, hence a bit blurry

  • 21 Dec 2018

    It’s that time, here are my top 9 albums of 2019! 7 - Beach House Columbus (Original Motion Picture Soundtrack) - Hammock The Appearances - Ester Drang The Art of Pretending to Swim - Villagers Twenty Two in Blue - Sunflower Bean In Transit - The Amazing Vide Noir - Lord Huron Marauder - Interpol The Great Untold - Scott Matthews

  • 20 Dec 2018

    Another new music genre

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