Microformats XFN

I’m getting into microformats in a big way. I guess you could say I drank the kool-aid. I’m going to start blogging a little bit about what I’ve learned. I will start with XFN. This idea was cooked up by Eric Meyer, Matt Mullenwegg and Tantek Celik. The premise was to describe the relationships that bloggers had in their blog rolls. To accomplish this they utilize the rel attribute. The rel attributes purpose is to describe the relationship the referenced document holds to the current document. Here is an example:

<link href="/css/bas.css" rel="stylesheet" type="text/css" />

The rel attribute is describing /css/bas.css as a stylesheet for the current document. So with some assumption on our part that the page that I’m on represents me in some way, then the following anchor would describe Juan as a friend and colleague of mine whom I’ve met in person.

<a href="http://technonexus.com" rel="friend colleague met">Juan Frenandez</a>

XFN uses a controlled vocabulary. The following definition list defines the available values.

friendship (at most one):

friend acquaintance contact

physical:

met

professional:

co-worker colleague

geographical (at most one):

co-resident neighbor

family (at most one):

child parent sibling spouse kin

romantic:

muse crush date sweetheart

identity:

me

Now in order to have some fun we should style the anchors that contain the XFN microformat.

Here is some CSS that will do the trick just fine. Caution IE fans! You’ll have to file these little tricks under progressive enhancement because IE just doesn’t play this game yet!

a[rel~="colleague"]:after {
    content: url("/images/uf/xfn-colleague.png");
    margin-left: .5em;
}

a[rel~="colleague"][rel~="met"]:after {
    content: url("/images/uf/xfn-colleague-met.png");
    margin-left: .5em;
}

Notice that we use the attribute selector format of [att~=val], which means match when the element’s “att” attribute value is a space-separated list of “words”, one of which is exactly “val”. We also use the :after pseudo class to insert content, in this case an image after the element. Now realize that the image in this case will still be part of the anchor so it will behave the same as the rest of the anchor element. We tack on a little padding for good separation and we’re done. It should look something like this:

This is what is should look like:

Here is a real life example (again, IE users can’t see this one, so you’ll just have to look at the previous image.):

Juan Fernandez

Now the icons I use I got from Factory City. They are licensed Creative Commons Share Alike 1.0 which makes them royalty free for you to use.

This is just the tip of the iceburg! I’ll be back with more kool-aid soon. Until then you can read John Allsopp’s fabulous book on microformats.

Comments