Externe Links kennzeichnen mit CSS

Man sieht es häufig im Netz, ein kleines, fast unschein­bares Symbol hinter einem Link, das darauf aufmerksam machen soll, dass es sich um einen Verweis auf externe Inhalte handelt. Wikipedia ist nur ein promi­nentes Beispiel, wo diese Link-Markierungen zum Einsatz kommen. Früher hat man diese Funktionalität häufig recht aufwendig mit JavaScript oder server­seitig mit Scripten oder gar manuell gelöst. Mit CSS geht das mitt­ler­weile sehr einfach und funk­tio­niert mit allen modernen Browsern.

Als erstes benötigt man natürlich eine entspre­chende kleine Grafik , die als Hinweis auf den externen Inhalt dienen soll. Nicht zu groß und dezent sollte sie sein um den Lesefluss nicht zu stören. Mit Hilfe von CSS kann man nun alle Hyperlinks um etwas Platz rechts oder links erweitern, um dort das gewünschte Symbol unter­zu­bringen. Der nötige CSS-Code dazu könnte dann so aussehen:

a[href^="http:"],
a[href^="https:"],
a[href^="ftp:"]
{
background: transparent url('/images/link_extern.gif') 100% 50% no-repeat;
padding-right: 12px;
}
a[href^="http://www.meinedomain.tld"],
a[href^="https://www.meinedomain.tld"]
{
background: transparent;
padding-right: 0px;
}

Im ersten Block werden alle Hyperlinks, deren URL mit »http:«, »https:« oder »ftp:« beginnen mit der Hinweisgrafik versehen. Dafür wird rechts vom Link der Innenabstand (Padding) vergrössert, so dass die Grafik hinein­passt. Das Icon selbst wird dann über die Definition des Hintergrundes am rechten Rand platziert, so dass es neben dem Linktext erscheint. Im zweiten Block wird diese Formatierung für Verweise auf eigene (interne) Inhalte aufge­hoben. So könnte man externe Links auch unter­schiedlich markieren. Verlinkt man beispiels­weise häufiger auf Werbelinks (Stichwort »Affiliate-Marketing«) könnte man diese entspre­chend anders kenntlich machen als normale Verweise. Ein kleines Apfelsymbol neben jedem Link in den iTunes Store wäre sicher auch nett. *g*

Selbst getestet habe ich das beschriebene Vorgehen mit allen gängigen Browsern unter MacOS X, OpenBSD und Linux. Die Webseite brow​ser​shots​.org hat mir dann auch für die Windows-Plattform die Kompatibilität mit den Microsoft-Browsern — die sich ja häufiger gerade mit CSS etwas schwer tun — bestätigt.

Wer statt einer einzelnen Grafik um einen externen Link herum Text darstellen möchte, dem wird die oben beschrie­benen Methode nicht weiter­helfen. Hier gibt es einen anderen Ansatz, den ich aber im Hinblick auf die Browserkompatibilität als etwas »wackliger« einschätze. Verwendet man das CSS-Attribut »after:« sähe das obige Beispiel so aus:

a[href^="http:"]:after,
a[href^="https:"]:after,
a[href^="ftp:"]:after
{
content: ' (externer Link)';
color: red;
}
a[href^="http://www.meinedomain.tld"]:after,
a[href^="https://www.meinedomain.tld"]:after
{
display: none
}

Wie im voran­ge­gan­genen Beispiel wird auch hier wieder im ersten Block nach Hyperlinks Inhalt angefügt. In diesem Fall wird in roter Farbe »(externer Link)« hinter jeden Hyperlink geschrieben. Grafiken oder andere beliebige Inhalte lassen sich so ebenfalls einfügen. Im zweiten Block wird der Zusatzinhalt dann für interne Verlinkungen ausgeblendet.

Wie man es umsetzt oder ob man eine Kombination aus beiden Ansätzen verwendet bleibt einem letztlich selbst überlassen und hängt von den Anforderungen sowie dem persön­lichen Geschmack ab. Die hier vorge­stellten Lösungen sind nichts neues und werden im Netz haufen­weise einge­setzt — dieser Blogeintrag soll primär auch als eigene Gedächtnisstütze dienen — viel­leicht kann der ein oder andere Leser aber dennoch was damit anfangen.

Ähnliche Artikel

• Google Webfonts — ein neuer Krakenarm? 20.05.2010
• The Dream Walking Society 04.02.2010
• Garnelen schonend einge­wöhnen 27.03.2010
• Weniger ist mehr 03.02.2010