{

Tobias Scheible
Autor, Referent & IT-Sicherheitsexperte
interne und externe Links unterscheiden

Datum: Montag, 12. August 2013

Autor: Tobias Scheible

Kommentar(e): 1 Kommentare

Kategorie: Aktuelles

Tags: jQuery, CSS3, JavaScript, Link

Ausgehende Links mit CSS3 kennzeichnen

Ich verlinke eigentlich immer einige andere Blogs und Seiten in meinen Beiträgen. Dabei finde ich es praktisch, wenn die internen und externen Links unterschieden werden können. Ich möchte euch drei Methoden vorstellen, wie ihr das einfach mit CSS oder JavaScript realisieren könnt.

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="http://scheible.it”" target="”_blank”">intern</a>

Und dazu der passende CSS-Code:

a[href^="http://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');
}
});
});
  • Artikel teilen:

Ăśber Tobias Scheible

Tobias Scheible

Tobias Scheible arbeitet als wissenschaftlicher Mitarbeiter an der Hochschule Albstadt-Sigmaringen. Dort ist er als Autor und e-Tutor im Masterstudiengang Digitale Forensik tätig und leite im Bachelorstudiengang IT Security Praktika rund um das Thema Informationssicherheit. Darüber hinaus ist er Mitinitiator des Kompetenzzentrums Cyber Security Lab, welches Forschungsprojekte auf dem Gebiet der IT-Sicherheit koordiniert. Zusätzlich hält er Vorträge und Workshops zu aktuellen Themen der IT-Sicherheit.

Alle Blog-Artikel Website Facebook Twitter Xing

Kommentare

Johannes

Mit der Moz Toolbar kann man sich die Links auf fremden Seiten markieren lassen, finde ich sehr praktisch.

Schreibe einen Kommentar!

Hilfe zum Kommentieren

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen oder eine Gefährdung anderer Besucher darstellen, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation fĂĽr alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und sie haben die Möglichkeit, ein Avatar-Bild zu verwenden. Dazu müssen Sie mit Ihrer E-Mail Adresse bei Gravatar angemeldet sein. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

nach oben