XFN styling

Posted Apr 13, 2004 in Blogging.

I'm experimenting with using generated content for styling XFN relationships in my out there list. I've never played with that aspect of CSS before, but I find it easy to understand. When all modern browsers support it, I envisage generated content becoming very popular.

I haven't been able to come up with XFN styling that I am happy with. I messed around for a while, trying to come up with styling cues or generated content that seemed appropriate, but everything I did seemed tacky and stupid-looking. For the moment I have a smiley :) for friends, just to see how it goes. I did consider creating a tooltip-like effect, with all the relationship values displayed, but it would interfere with my title attributes.

Anyone got any cool ideas?


  1. Gravatar

    You could use JavaScript to add the relation in the title attribute, something like "Friend: Thijs van der Vossen".

    Posted by Mark Wubben on Apr 13, 2004.

  2. Gravatar

    That sounds like a good idea. The only problem I can see with that solution is that the attribute might grow to the length that some browsers (like Firefox) will truncate it. Also, there are many combinations to think of.

    I'd like to come up with some sort of visual cue. I thought perhaps of designing a variety of icons, much like the smileys on message boards and instant messages.

    Posted by Simon Jessey on Apr 13, 2004.

  3. Gravatar

    You are welcome to look at how I differentiate my XFN links with CSS - I wrote up some notes in on my site: :) Older browsers won't show anything, but that wasn't too big of a deal to me.

    Posted by kristine on Apr 13, 2004.

  4. Gravatar

    Thank you for the input, Kristine. I think that designing my own little icons is probably the way to go.

    By the way, I was impressed with your 4th anniversary montage. That's a lot of redesigns! I'm not even sure all my old designs still exist. I might have to use the Wayback Machine - - to find my old stuff.

    Posted by Simon Jessey on Apr 14, 2004.