Externe Links speziell markieren

Auf einer Webseite sollen Links zu externen Webseiten besonders gekennzeichnet werden (zB. mit einem kleinen Icon). Ausserdem sollen Links, die ein neues Browserfenster öffnen, anders markiert werden, als Links, die sich im aktuellen Fenster öffnen.

Einige Methoden hatte ich bereits getestet, bis ich auf einen Lösungsansatz von pro-barrierefreiheit.de gestossen bin. Der dort erschienene Artikel stammt im englischen Original von der australischen Seite Max Design.

Ein einfaches Beispiel soll die Verwendung von CSS Klassen verdeutlichen: Zuerst definiert man eine eigene Klasse für externe Links.

Google

Um lokale von externen Links unterscheiden zu können, fügt man nach dem Link einen klaren Beschreibungstext ein, wie zB.

Google [externer link]

Damit der Beschreibungstext von CSS-fähigen Webbrowsern nicht dargestellt wird, klammert man ihn mit einem eigenen, allgemeinen Inline-Bereich aus (Anm: ) und platziert die Anzeige mittels CSS weit ausserhalb des sichtbaren Bereichs.

Google [externer link]

Zum CSS fügt man folgende Klasse hinzu:

span.ext {
position: absolute;
top: -4000px;
left: -4000px;
overflow: hidden;
display: inline;
height: 0;
width: 0;
}

Ein nicht-CSS-fähiger Browser würde den Inline-Bereich nicht verstehen, also den Beschreibungstext einfach darstellen.

Für alle anderen Browser muss man mit der Klasse “externerLink“ ein kleines Icon anzeigen lassen.

a.externerLink:link {
background: url(extern.gif) no-repeat 100% 0;
padding: 0 20px 0 0;
}

Um auch bereits besuchte Links von noch nicht besuchten unterscheiden zu können, „verschiebt“ man die Grafik des Icon um -100px.

a.externerLink:visited {
background: url(extern.gif) no-repeat 100% -100px;
padding: 0 20px 0 0;
}

Ein weiterer Effekt lässt sich mit einem Mouse-Over realisieren. Dazu ändert man auch die Textfarbe des Links und verschiebt die Grafik um -200px.

a.externerLink:hover, a.externerLink:active, a.externerLink:focus {
color: #990033;
background: #CDBA92 url(extern.gif) no-repeat 100% -200px;
padding: 0 20px 0 0;
}

Hier das verwendete Icon (Anm: transparentes GIF)

Hier ein fertiger »Beispiel-Link«: Google [externer link]

Kommentar schreiben
Webdesign