Links, die von der eigenen Seite fortführen, kann und sollte man gesondert markieren. Das kommt der Usability zugute und ist auch aus rechtlicher Sicht zumindest nicht schädlich. Auf meiner Seite hier sind externe Links mit einem kleinen Pfeil am Ende gekennzeichnet. Realisiert ist das Ganze mit CSS2-Selektoren, die natürlich im Internet Explorer nicht funktionieren, aber ansonsten sehr bequem sind. So weit, so unspektakulär.
Interessant wird es, wenn man sich einmal ansieht, wie derartige Grafikanhängsel meist eingefügt werden. Oft wird an dieser Stelle weiter fortschrittliches CSS verwendet und man greift zu automatischen Inhalten. Das sieht dann in der Regel so oder ähnlich aus:
/* Erst mal allen Links, die mit http:// beginnen eine Grafik verpassen... */
a[href^="http://"]:link::after, a[href^="http://"]:visited::after {
content:url("link_normal.png");
}
a[href^="http://"]:hover::after, a[href^="http://"]:active::after {
content:url("link_hover.png");
}
/* ...und die dann wieder da entfernen, wo es nach dem http:// mit der Adresse MEINER Website weitergeht */
a[href^="http://www.seite.de"]:link::after,
a[href^="http://www.seite.de"]:visited::after,
a[href^="http://www.seite.de"]:hover::after,
a[href^="http://www.seite.de"]:active::after {
content(" ");
}
Diese Methode funktioniert an sich auch ganz prächtig, aber einiges stört bei diesen mit content:url("") eingefügten Bildern ganz gewaltig: Link und Bild können durch einen Zeilenumbruch voneinander getrennt werden. So steht dann in der einen Zeile ein externer Link ohne Markierung und in der nächsten eine Markierung ohne Link. Hinzu kommt, dass das Entfernen von eingefügten Inhalten problematisch ist, denn je nach Browser ist entweder content:" ";, content:""; oder content:none; die einzige Lösung, die nicht ungewollte Leerstellen oder seltsames Verhalten der Links mit sich bringt.
Die Lösung: Vergessen wir die automatischen Inhalten und nehmen doch wieder Hintergrundbilder zur Hand.
/* Erst mal allen Links, die mit http:// beginnen eine Grafik verpassen... */
a[href^="http://"]:link, a[href^="http://"]:visited {
padding-right:16px;
background-image:url("link_normal.png");
background-repeat:no-repeat;
background-position:bottom right;
}
a[href^="http://"]:hover, a[href^="http://"]:active {
padding-right:16px;
background-image:url("link_hover.png");
background-repeat:no-repeat;
background-position:bottom right;
}
/* ...und die dann wieder da entfernen, wo es nach dem http:// mit der Adresse MEINER Website weitergeht */
a[href^="http://www.seite.de"]:link,
a[href^="http://www.seite.de"]:visited,
a[href^="http://www.seite.de"]:hover,
a[href^="http://www.seite.de"]:active {
background-image:none;
padding:0;
}
Das führt bei weniger Notwendigkeit für noch nicht ganz ausgereifte CSS2-Implementierungen zum optisch fast identischen Ergebnis, allerdings ohne das Problem bei Zeilenumbrüchen. Nachteilig ist, dass man diese Technik (logischerweise) nicht mit Hintergrundgrafik-Unterstreichungen kombinieren kann. Wer Zeichen statt Grafiken verwenden möchte (z.B. →) kommt ebenfalls an automatischen Inhalten und den damit verbundenen Problemen nicht vorbei.