As I was redesigning a bit lately and making use of FamFamFam’s very nice Silk icon set (used under the CC Attribution License) and it occurred to me I could use CSS2.1 Attribute Selectors to show the relationships the XFN defines.

If you’re not familiar with XFN this wikipedia article gives a good introduction.

In the WordPress blogroll you get the option to add XFN relationships to the people/links, as I’ve been on a bit of a microformats kick i’ve been thinking how I can make better use

The XHTML

<ul>
<li><a rel="friend met neighbor" xhref="http://www.simoncoltman.net/">Simon Coltman</a></li>
<li><a rel="friend met" xhref="http://fberriman.com/">Frances Berriman</a></li>
<li><a rel="acquaintance" xhref="http://moglenstar.net/">Max Glenister</a></li>
<li><a rel="friend met co-worker" xhref="http://www.ricardocabello.com">Ricardo Cabello</a></li>
<li><a rel="friend met" xhref="http://www.krisswatt.co.uk">Kriss Watt</a></li>
</ul>

The CSS

ul.xfn_example a {
background-image: url(/images/icons/user_gray.gif);
}

ul.xfn_example a[rel*="acquaintance“] {
background-image: url(/images/icons/user_blue.gif);
}

ul.xfn_example a[rel*="friend“] {
background-image: url(/images/icons/user_green.gif);
}

ul.xfn_example a[rel*="co-worker“] {
background-image: url(/images/icons/user_suit.gif);
}

Browser Difficulties

Attribute selectors are not supported in IE6 so the first rule sets the background all links, if the other more complicated rules aren’t understood then the icon stays a default grey. For the browser that do understand the more complex rules, assigning icons for some of the different relationship types.

They’re ordered so that, for example co-worker will override friend, should the XFN define both of these relationships. I’ve not done it here but if you wanted to you could chain the selectors and create a specific rule (and image) for someone who is a friend and a co-worker a[rel*="friend“][rel*="co-worker“]

With the announcement that IE7 will be supporting, amongst other things, attribute selectors I can imagine them being used a lot more as IE7 adoption increases and progressive enhancements like this becoming more common.

Design Flaws

The different icons don’t do a great job of communicating the different relationships, but maybe more specific icons would help, or on a larger list maybe a key might help?

Conclusions

This isn’t a particularly complicated idea but i’ve had a couple of people ask me about it, so I thought I’d give a brief explanation and maybe encourage people to take the idea further and make something cooler.

If you not familiar with the FAMFAMFAM Silk icons they’re a set of 1000 beautiful little 16×16px icons that you’re free to use under the CC-Attribution license.

I’ve been using them a little recently for a few things, including this blog and some coding projects. The problem is, with 1000 icons, finding the ones that are suitable for what you’re doing.

The Silk webpage used to have every icon on the page, with a little search box to only show ones matching your search. This was great, you could filter down to the more relevant ones, while still comparing them on the same page.

Unfortunately this seems to have gone now, so I thought I’d put together a version of it myself, mostly to make it easier to find icons, but also as an excuse to play around with jQuery.

jQuery is one of the huge variety of Javascript libraries around at the moment. It’s got very powerful selectors, cross browser events and animation and is built around the idea of chaining. I’ve used it a little recently at work and it has made Javascript fun.

The Icon Selector

In half an hour or so I knocked together a quick demo of (as i’ve now dubbed it) the Icon Selector. I’m pretty happy with how it turned out, it’s easy to search for and preview the icons you want.

I’ve made a few tweaks since to speed it up a little, you can take a peak at the Javascript source if you want to see the jQuery magic, it’s pretty cool.

Most impressively it works well on all modern browsers. jQuery handles a lot of the inherent differences in the DOM and event models. Conclusions? jQuery is very nice, definately something i’ll be using more in the future.