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:

...

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;
}

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…

You are a true RSS aficionado! While others are drowning in social media noise, you enjoy the simplicity and control of RSS. Congrats!