[uf-discuss] Q: visualisation of XFN

[Matthew Levine]

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

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

Thomas,

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~=friend]:after,
   a[rel~=contact]:after,
   ...
   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.
http://www.infocraft.com/