I’ve just put together a CSS2/CSS3 stylesheet for XFN. It uses Roger Darlington‘s XFN icon to indicate the presence of XFN information for browsers that support CSS2, which is cool but ultimately not a big deal. The interesting part is the set of rules for CSS3, which append a set of icons (currently single characters) to each XFN-enabled link that highlight the relationships in that reference; in a CSS3-capable browser you will see something like this (fmcnr&M♥). (At least, that’s the theory… I don’t know of any browser that can handle the CSS3 rules yet.)
There are actually CSS2 rules for each individual relationship in the file as well, but they’re overridden by the icon rule because only the last value will be displayed anyway. They’re included for completeness, and because they may be useful as examples.
I’ve looked for, but been unable to find as of yet, a set of XFN relationship icons. I’ve used some Unicode glyphs for the romantic relationships, but if anyone has more or (a set of) images they’d like to share, please let me know and I’ll either reference them or provide them directly from here.
As the Creative Commons license in the file suggests, Share and enjoy!
