Natürlich kann einfach allen externen Links eine extra CSS-Klasse zugewiesen werden. Aber das ist ziemlich aufwendig und auch nicht so elegant. Mit den neuen CSS3-Selektoren gibt es elegantere Möglichkeiten, wie ausgehende Links gekennzeichnet werden können.

CSS3 Selektor – REL-Attribut

Mit dem REL-Attribut innerhalb eines Links kann die Beziehung zwischen zwei Seiten semantisch beschrieben werden. Mit der Auszeichnung rel=”external” wird zum Beispiel auf eine externe Seite hingewiesen. Die bekannteste Variante ist rel=”nofollow”, damit kann ein Link von der Berechnung der Linkpopularität ausgeschlossen werden, dies ist wiederum für die Suchmaschinenoptimierung relevant.

Einige Content-Management-Systeme setzen dieses Attribut automatisch ein. Das manuelle Setzen ist zwar genauso aufwendig wie die Vergabe von CSS-Klassen, aber wenigstens hat man damit einen semantisch korrekten Weg. Eine Übersicht über die häufigsten REL-Attribute gibt es bei flexib.

Mit CSS3 kam nun ein neuer Selektor hinzu, um das REL-Attribut abzufragen. Das nachfolgende Beispiel zeigt, wie so ein ausgezeichneter Link extra formatiert werden kann.

So sieht der Link mit dem REL-Attribut aus:

<a rel="external" href="//css-tricks.com" target="_blank">CSS-Tricks</a>

Und dazu der passende CSS-Code:

a[rel="external"] {
  /* CSS-Anweisungen */
}

Auf CSS-Tricks gibt es auch eine gute Übersicht, wie der Selektor mit Operatoren flexibel eingesetzt werden kann.

CSS3 Selektor – HREF-Attribut

Eine andere Methode ist, das HREF-Attribut zu verwenden. Der Vorteil ist hier, dass kein zusätzliches Attribut hinzugefügt werden muss. Damit lässt sich das Ganze auch in bestehende Seiten sehr einfach integrieren. Der Ansatz ist hier, dass interne Links entweder gar kein http:// vorangestellt haben oder die Domain bekannt ist. Damit können alle externe Links mit CSS entsprechend angepasst werden.

Hier ein externer und ein interner Link:

<a href="http://css-tricks.com”" target="”_blank”">extern</a>
<a href="https://scheible.it”" target="”_blank”">intern</a>

Und dazu der passende CSS-Code:

a[href^="https://scheible.it"]{
  /* Bedeutung: alle a-Elemente die nicht mit https://scheible.it anfangen.  */
  /* CSS-Anweisungen */
}

jQuery – TARGET-Attribut

Alternativ kann das Ganze auch in JavaScript mit Hilfe von jQuer realisiert werden. Dieser Aufruf durchsucht das gesamte Dokument nach allen Links und überprüft, ob target=”_blank” gesetzt ist. Wenn dies der Fall ist, wird die CSS-Klasse “external” hinzugefügt.

$(document).ready(function(){
 $("a").each(function(index, value) { 
   if($(this).attr("target")=="_blank"){
     $(this).addClass('external');
   }
 });
});