CSS für XFN rel-tags

Da mir die neuen XFN Icons von Wolfgang Bartelme und Chris Messina recht gut gefallen, hab ich sie mal in mein CSS eingebaut. Das schwierige daran war, kombinationen von XFN Beziehungen mit CSS abzubilden. Ein Beispiel:

<a href="https://notiz.blog" rel="friend met colleague">...</a>Code-Sprache: HTML, XML (xml)

Deshalb hab ich für mich die Hierarchie festgelegt:

• me
• professional: co-worker, colleague
• friendship (at most one): friend, acquaintance, contact
• romantic: muse crush date sweetheart

Das heißt im Klartext: Wenn ich einen rel-tag wie z.B. rel="friend met colleague" wird nur friend und met berücksichtigt weil das für mich höherwertig is. Wenn ihr ne andere Reihenfolge wollt, könnt ihr das ganze einfach in der CSS Datei umstellen (das Wichtigste unten).

Ich habe das ganze mit den in CSS 2.1 definierten Selectors realisiert und mit Firefox 2.0 und IE7 getestet.

Beispiel CSS Code:

a:hover[rel~="me"] {
  background: url(images/xfn-me.png) no-repeat right; padding-right: 25px;
}

a:hover[rel~="co-worker"], a:hover[rel~="colleague"] {
  background: url(images/xfn-colleague.png) no-repeat right; padding-right: 25px;
}

a:hover[rel~="co-worker"][rel~="met"], a:hover[rel~="colleague"][rel~="met"] {
  background: url(images/xfn-colleague.png) no-repeat right; padding-right: 25px;
}Code-Sprache: CSS (css)

Komplette CSS Datei runterladen

Beispiele: ME, FRIEND COLLEAGUE, COLLEAGUE, COLLEAGUE MET, FRIEND MUSE, FRIEND MUSE MET.

Würde mich sehr über Kommentare und Anregungen freuen…