Tonight while working on some blog posts about CodeMash I decided to make use of a new Windows Live Writer plug-in, Insert XFN Link.
In my post about becoming a more productive programmer I tagged a link to Jon Galloway's site with the XFN markup. I quickly realized that I didn't like the icon that Subtext's XFN Highlighter uses. So naturally I set to the web to find some alternatives.
I came across some great icons for the XFN Microformat, and I just had to have them. Since they are licensed under the Creative Commons ShareAlike 1.0 license I pulled them down and added them to my Subtext install. One of the first thing I noticed about the icon set is that it has icons for some of the combination of valid XFN rel values.
For example, if you mark someone as a friend you see one icon [ 
], but my marking them as both a friend and met you see a slightly different one [ 
].
I thought "OK, so that's pretty cool, but how can I really make use of this on my real blog?" In Subtext we implemented the XFN Highlighter using some clever CSS and JavaScript, and the key is the CSS.
The XFN markup works by allowing you to specify multiple relationships (like friend and met) in the rel attribute of a hyperlink element. The hyperlink to Jon's site looks like this:
<a class="xfnRelationship newWindowStyle"
rel="external friend met co-worker"
href="http://weblogs.asp.net/jgalloway/"
title="Jon Galloway (new window)">Jon Galloway</a>
The original XFN Highlighter CSS Selector simply looked for the xfnRelationship class to figure out how to style the hyperlink. Simple enough. But I need to be able to have a CSS Selector that looks at an element's attributes, and the values of said attribute.
CSS 2.1 Attribute Selectors to the rescue! As long as your browser supports the CSS 2.1 standard you can make use of these powerful selectors when building your style sheets. That is to say - this doesn't work in IE 6.0, so I had build my new selectors so they would fail gracefully and revert to the original behavior of just looking at the hyperlink's class.
I'm not going to take a deep dive into exactly how I used the Attribute Selectors to add the new icons, you can take a look at my style sheet for that. Instead, I wanted to show you some examples* of Subtext's XFN Highlighter (with the new icons) in action.
You'll notice that I used the same icons for both co-worker and colleague. I did this because the icon set that I mentioned only had an icon for colleagues, but I feel that it also works as an icon for the co-worker relationship. The same could probably also be said for crush and sweetheart.
The icon next to Dave's link is my new default XFN icon... replacing the original one that I don't like. You're seeing that icon because the relationships for Dave don't match any of the ones defined in my style sheet. So naturally he is being assigned the default icon.
Also, if you look at the underlying markup for the link to Phil you'll see that I marked him as a friend, met, and co-worker. But the icon shown is for a friend-met, not co-worker-met. The order or importance is determined by the order in which you place the CSS selectors in the style sheet. I have the friend relationships below the co-worker/colleague relationships in the actual style sheet file. So by simply reordering the selectors you can set a weight to the relationships.
I hope that Bartelme will release some new icons for the other relationships - at which point I will update the XFN Highlighter to include the new icons.
I also plan to push out an new version of Subtext (soon) that will include these new icons as well as several bug fixes.
* = example links have been modified to showcase all of the available icons.