Wer kennt nicht das Problem mit externen Links? Man möchte dem Benutzer kein target=“_blank“ zumuten und lässt daher auch externe Links im gleichen Fenster öffnen. Damit der Benutzer aber sehen kann, dass es sich um einen externen Link handelt, möchte man die Links gerne markieren. Daruch kann der Benutzer ihn eventuell selbstständig in einem neuen Fenster/Tab öffnen.

Bisher habe ich schon viele Lösungen für dieses Problem gefunden. Einige davon wurden serverseitig vorgenommen, einige sehr aufwändig per JavaScript clientseitig. Meistens wurden dabei alle Links innerhalb einer Seite gesucht und dann per Script angepasst.

Durch die tollen neuen Möglichkeiten von CSS3 gibt es aber eine sehr elegante Variante, die keinerlei Umbauarbeiten an den Scripten erfordert. Es reicht ein simpler CSS Selektor, der alle externen Links erkennt und anschließend entsprechend kennzeichnet.

a[href^='http']:not([href^='http://example.com']):not([href^='https://example.com']){ /* Styles für externe Links */ }

Der Anfang sollte bekannt sein. Wir selektieren zuerst alle Links mit einem „href“ Attribut, das mit „http“ beginnt. Damit schließen wir alle Anker, reine Ankerlinks, relative Links sowie „mailto“-Links aus. Mit der not() Funktion von CSS3 selektieren wir anschließend alle Links, die NICHT die Domain als absoluten Link mit „http“ oder „https“ enthalten. Dabei ist natürlich „example.com“ durch die zu suchende Domain zu ersetzen. Sollen auch Subdomains nicht selektriert werden, können diese ebenfalls in einer weitern not() Funktion angegeben werden. Vereinfacht könnte man auch alle Links auswählen, die den Domainnamen und die Toplevel-Domain nicht enthalten:

a[href^='http']:not([href*='example.com']){ /* Styles für externe Links */ }

Hierbei würden aber auch externe Links ausgelassen, die den eigenen Domainnamen im Linktext enthalten wie z.B. bei „http://www.einblog.de/toller_artikel_auf_example.com“.

Nachdem nun alle externen Links selektiert wurden, können sie mit ein paar netten Styles versehen werden. Ich habe hier mal exemplarisch mit dem Pseudoelement „:after“ einen Text nach dem Link eingefügt, diesen rot markiert und zusätzlich ein Icon als Hintergrund eingefügt. Der Phantasie sind hier aber keine Grenzen gesetzt.

a[href^='http']:not([href^='http://example.com']):not([href^='https://example.com']):after {
	content: ' (external)';
	color: red;
	background: transparent url('external_link.png') center right no-repeat;
	padding-right: 16px;
}

Wie das ganze für die verschiedenen Linkarten aussieht könnt Ihr euch auf der kleinen Beispielseite ansehen. Ihr benötigt dafür aber einen teilweise CSS3 kompatiblen Browser. Ich habe es erfolgreich mit Firefox 3.5, Safari 4.0, Chrome 2.0 und Opera 10.0 getestet. Der Internet Explorer unterstützt die not() Funktion auch in Version 8.0 noch nicht.

Beispiel

Wenn Ihr Anregungen zu der Lösung habt oder eine andere tolle Lösung kennt würde Sie mich sehr interessieren.