[uf-discuss] Q: visualisation of XFN

Matthew Levine matthew at infocraft.com
Tue Sep 19 02:14:39 PDT 2006

On Sep 19, 2006, at 1:52 AM, Thomas Hofmann wrote:

> has someone a viewable solution in CSS for displaying the  
> attributes of XFN?


You can use advanced CSS selectors along with generated content to do  
a pretty decent job:

   a[rel]:after {
     content: " [" attr(rel) "]";

This will add, for example, " [friend]" to all the links with  
rel="friend". To avoid non-XFN links with the rel attribute, it might  
be best to limit the scope to, say, a container with class="xfn":

   .xfn a[rel]:after {
     content: " [" attr(rel) "]";

Another solution would be to select for the XFN values explicitly,  
although this would get a bit tedious:

   a[rel~=acquaintance]:after {
     content: " [" attr(rel) "]";

Unfortunately, this only works in the browsers that support attribute  
selectors, :after pseudo-selectors, and generated content (i.e. not IE).

- Matthew

Infocraft: handcrafted markup for savvy designers.

More information about the microformats-discuss mailing list