Ich finde es einfach fair, Links auf fremde Webseiten auch als solche zu kennzeichnen – dann geht mir kein Besucher „einfach so“ verloren. Noch besser ist es natürlich, wenn die externen Links auch grundsätzlich immer in einem neuen Fenster oder Tab geöffnet werden – einerseits ist das eine kleine optische Unterstützung für den Besucher, mit der er deutlich realisieren kann, dass er sich nicht mehr auf der ursprünglichen Website befindet und andererseits behalte ich den Besucher trotzdem noch auf meiner eigenen Website, von der er gestartet ist. Gerade wenn auf der externen Seite dann noch ein paar weiteren Links gefolgt ist, macht sich kaum jemand die Mühe und geht in seiner Browser-History den ganzen Pfad zurück – also habe ich den Besucher erstmal verloren.
Vorab noch ganz deutlich der Hinweis: Auch dieser Artikel ist nur eine Notiz für mich selbst, damit ich nicht immer wieder danach suchen muss – deswegen ist er auch unter Zettelkasten kategorisiert.
Den Inhalt habe ich aus folgenden Quellen zusammengesammelt:
- CSS4you.de
- um-fritz.de
- maxdesign.com.au
- byteorder.org
Methode 1: handgemacht, mit voller Kontrolle über jeden einzelnen Link
Im CSS definiere ich mir eine separate Klasse für externe Links, die ich mit class="extern" im Quellcode zuweisen kann:[codesyntax lang=“css“]
a.extern {
background: url(../link_extern.gif);
background-position: left;
background-repeat: no-repeat;
padding-left:12px; // mindestens Breite der verwendeten Grafik
}[/codesyntax]
oder in Kurzform:[codesyntax lang=“css“]
a.extern {
padding-left:12px;
background:url(../link_extern.gif) center left no-repeat;
}[/codesyntax]
Die Suche nach einer geeigneten Grafik ist ein mühsamer Weg, aber früher oder später hat man dann was gefunden (z. B. hier) ….
Ich war so frei, die Grafik 
von Wikipedia zu verwenden (wie auch in dem Beispiel von byteorder.org).
Methode 2: Grafik automatisch einfügen
Zunächst wird jedem Link, der mit http:, https: oder ftp: beginnt, die kleine Grafik zugewiesen:[codesyntax lang=“css“]
a[href^="http:"],
a[href^="https:"],
a[href^="ftp:"]
{
background: transparent url('../link_extern.gif') center left no-repeat;
padding-left: 12px;
}[/codesyntax]
Dann wird die Grafik für alle Links, die auf die eigene Website verweisen, wieder entfernt:[codesyntax lang=“css“]
a[href^="https://the.mnbvcx.net"],
a[href^="http://meineanderesite.net"],
{
background: transparent;
padding-left: 0px;
}[/codesyntax]
Und wie wird jetzt das target gesetzt?
Leider ist ja target=“_blank“ bei striktem XHTML nicht mehr erlaubt, also muß man entweder auf XHTML strict verzichten oder sich anderweitig behelfen.
Bei um-fritz.de ist die Lösung mit JavaScript beschrieben, dem ist eigentlich nichts mehr hinzuzufügen.
