The Hickensian

14.09.06 Highlight Microformats with CSS

29 comments
Tagged with: css, microformats

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.

Comments | RSS

No.1

∞ Egor Kloos said 1244 days ago:

I just love tails! But I’ll certainly give this a look see on Safari.

No.2

∞ Stuart Frisby said 1244 days ago:

Good idea, and works nicely on my wdgty site, at least know I don’t get empty vCards when using the bookmarklets.

No.3

∞ Elliott P. said 1244 days ago:

Simply amazing! I never actually thought about having something like this, but it really makes a lot of sense. (Kind of like Microformats:) I am just starting to learn about them and the journey gets better and better every day! Thanks for this contribution

No.4

∞ Jeremy Keith said 1244 days ago:

Jon, this is superb. I’ve been kicking the tyres with it over at my site and it’s working a treat in Safari. It highlights contact information and events beautifully.

No.5

∞ James Darling said 1244 days ago:

Brilliant Idea, and very helpful. Your helping putting the egg with the chicken, or something.

No.6

∞ Mark Norman Francis said 1244 days ago:

Reading this was one of those smack-forehead-and-exclaim “why didn’t I think of that” moments. Beautiful.

No.7

∞ Andy Field said 1244 days ago:

ohhh nice one. You didn’t per chance hear James Edward’s comment at last weeks microformat picnic about wishing designers would do something with regard to displaying microformats?

No.8

∞ Chris Casciano said 1244 days ago:

nice to see you run with the idea Jon!

I’ll certainly install it later today, curious to see the how the presentation changes interact with various content out there… sites like Place Name Here where I already have a stylesheet up to highlight microformats (hcalendar, hreview, etc) with icons, or sites like Tantek’s where his hcard is both inline and minimal (in the footer). Certainly an issue that is a lot easier to deal with when the content is just a single post in a feed reader. ;)

No.9

∞ Dan Cederholm said 1244 days ago:

Awesomeness!

Adding :hover to each class selector is interesting as well, keeping the initial design intact until your mouse is over it. Slightly more mysterious, though :D

Great stuff, Jon.

No.10

∞ Jon Hicks said 1244 days ago:

" Reading this was one of those smack-forehead-and-exclaim â€œwhy didnâ€™t I think of thatâ€ moments.

Yeah, I really wish I had thought of it first too!

" You didnâ€™t per chance hear James Edwardâ€™s comment at last weeks microformat picnic about wishing designers would do something with regard to displaying microformats?

To be honest, I couldnâ€™t hear much at the picnic, except for sitar music!

No.11

∞ Garrett Dimon said 1244 days ago:

It’s funny how the best ideas are the simplest. Great work, Jon.

No.12

∞ Nate K said 1244 days ago:

This is GREAT. I am just beginning with Microformats, but this is a great little trick.

No.13

∞ tobestobs said 1244 days ago:

This is a great idea. Last month I created a basic microformats stylesheet with all the empty selectors as a starting point for people.

I just added your styles to the file so people can use them on their website as well (i hope that is ok). I think this would be a nice way to promote microformats if everybody had the microformats logo next to their contacts on their web page.

You can find my original blog post here: http://www.mindgarden.de/index.php?id=594 and the newer one here: http://www.mindgarden.de/index.php?id=603 (both in german, sorry for that)

No.14

∞ Edward O'Connor said 1244 days ago:

Beautiful!

No.15

∞ pauldwaite said 1244 days ago:

Might be cool if sites adopted these styles straight off too. Then everyone would see them, and the Microformats Love would spread far and wide, possibly.

No.16

∞ Ash Searle said 1244 days ago:

Smart idea, and nicely implemented (loving those embeded data: URLs Jon)

It’s worth noting this also works in Opera, using essentially the same instructions as Safari, but the style-sheet is specified here:
Tools > Preferences > Content > Style Options > My style sheet
(oh, and no need to restart)

No.17

∞ Gordon Mackay said 1244 days ago:

Wow, incredible idea Mr Hicks. Thank you!

No.18

∞ Ryan Miglavs said 1244 days ago:

This is just lovely! Really, a nice little solution. I’m almost inclined to just turn it on with :hover on my sites.

No.19

∞ Jon Hicks said 1244 days ago:

As Dan said, I like the idea of the ‘mystery’ element with :hover!

No.20

∞ Chris Messina said 1244 days ago:

Love it!

No.21

∞ Chris Neale said 1243 days ago:

Works equally well @import ed at the top of userContent.css, though there are interesting side-effects …

more evident at http://briks.si/kontakt/ than at http://briks.si/podjetje/

No.22

∞ Olly said 1243 days ago:

Good work sir. Just the kick I needed to implement a couple of hCards on my own site :)

[mmmm, Camino…]

No.23

∞ DavidKnowles said 1243 days ago:

Please forgive my ignorance, but what the freek are Microformats.

I have looked up a few times and come to sites that don’t explain what it really is and what it’s uses are.

Does anyone know a link that explains how it works and what the benfits are in english and not tech spec lol. Then i can hip and cutting edge 2.

No.24

∞ Tobias said 1243 days ago:

Very nice indeed. Works well with most sites. It helped me to find out that some people use microformats where I did not noticed it before. One of my favourite sites though uses it to create a hcard for each commenter. So there it looks a bit ugly (see it) whereas the original hcard looks nice (see it).

No.25

∞ Graham Bancroft said 1243 days ago:

Is it possible to include/add a user js file to add an extract vcard type link to the rendered image, that would be smashing.

No.26

∞ Jim Cateris said 1241 days ago:

Pictures are different to compare. On the right there is full text, on the left just a short

No.27

∞ Chris said 1241 days ago:

Regarding the webkit border-radius, it doesn’t seem to take effect unless it is invoked with -webkit-border-radius:. Then, you get the pretty border.