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…

2 Kommentare zu “CSS für XFN rel-tags

  1. Hi Pfeffer,
    ich blick einfach nicht was du hier genau meinst! Wollte dir aber auch mal hier schreiben…CSS versteh ich ja jetzt….aber der rest ist mir fremd.
    Na dann, nimm dir mal Zeit und erklär es mir…
    Und natürlich auch Grüße von Familie Stokrasch

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert