Externe und interne Links Erkennen

In diesem Beitrag werde ich euch eine Möglichkeit vorstellen, externe und interne Links auf einer Webseite mittels CSS oder JavaScript zu erkennen. Für das Stylen eines externen Links ist CSS vollkommen ausreichend und es wird kein JavaScript benötigt. JavaScript kann aber durchaus nützlich sein, um andere Attribute als Styling hinzuzufügen.

Um diesen Artikel zu verstehen, solltest du Grundkenntnisse in HTML und CSS haben. Es ist eine einfache Technik, zur Selektierung aber sehr hilfreich.

Brauche ich eine CSS Class für die Erkennung?

Nein, die Selektierung wird nicht mittels einer Class erfolgen. Du benötigt zwei Selektoren, die nicht zur Basis der Selektoren gehören und eher selten im Vergleich zu den normalen Selektoren eingesetzt werden. Das sind einmal die Attributselektoren und des Weiteren die sogenannten Pseudoklassen.

Wie sieht ein Attributselektor aus ?

Die Attributselektoren sind ziemlich mächtig - der kleine Freund vom RegeX in CSS.

Ein Attributselektor kann Folgendes sein: siehe im unten stehenden Beispiel, darüber hinaus gibt es noch weitere, die für die Beispiele nicht relevant sind.

[data-essen="Apfel"]{ /* Style Anweisung */ } 

Mit dieser Variante selektierst du genau ein Key/Value Pair. In diesem Beispiel das Attribute namens "data-essen", mit "Apfel" als Wert.

[data-essen]{}

Mit diesem Code selektierst du alle Attribute, die ein Attribut mit dem Namen "data-essen" haben. Egal ob Äpfel oder Birnen.

[data-essen^="Apfel"]{}

Mit diesem Code selektierst du nicht nur das Essen "Apfel", sondern auch den Apfelkuchen. Es wird alles selektiert, was das Attribut "data-essen" mit dem Anfangswortteil "Apfel" erkennt.

[data-essen*="Apfel"]{}

Es wird alles selektiert, wo das Attribut "data-essen" den Wert "Apfel" an irgendeiner Stelle erkennt.

[data-essen*="Apfel" i]{}

Wenn du hinten in den eckigen Klammern noch ein i schreibst, wird die Groß- und Kleinschreibung von Buchstaben (ASCII Bereich) ignoriert.

Selektierung mittels CSS - was machen wir?

Nachdem wir uns nun die Attributselektoren grob angeschaut haben, können wir unsere externen und internen Links erkennen, auseinanderhalten und stylen.

Externe Links stylen mit CSS

Bei externen Links ist es notwendig, dass wir alle a-Tags selektieren und sagen, dass es ein href Attribut haben muss, das mit http oder https anfängt. Das sorgt schon einmal für die SSL Abdeckung; dass es darüber hinaus noch ein Protokoll hat, sagt uns, dass es ein externer Link sein kann. Als zusätzlichen Wert geben wir das i an, das Klein- bzw. Großschreibung irrelevant macht, um somit Tippfehlern vorzubeugen und alle Links korrekt abzufangen.

Nun prüfen wir mittels dem :not Selektor, ob der href nicht unsere Webseite enthält. Ist das der Fall, wird unser Linkhintergrund rot.

/* Externer link */
a[href^="http://" i]:not([href*="hellocoding.de" i]),
a[href^="https://" i]:not([href*="hellocoding.de" i]){
    background: red;
}

Interne Links stylen mit CSS

Interne Links können unterschiedlich aussehen. Die Domain kann enthalten sein oder auch eben nicht. Aber wenn sie nicht enthalten ist, darf es auch kein http geben. Das sagen wir mit der Anweisung.

Als erstes selektieren wir alle a, die die Domain im href haben, egal ob groß- oder kleingeschrieben. Als zweites selektieren wir alle Links, die kein http oder https enthalten, da dieses relativ, also interne Links sind.

a[href*="hellocoding.de" i],a:not([href^="http://" i]):not([href^="https://" i]){
    background: green;
}

Kleiner Hinweis: Im oben stehenden Beispiel siehst du, wie du auch mehrere not: Anweisungen verbinden kannst.

CSS Links mit Target=_blank Attribut stylen

Wenn du ein Target Blank Attribut bei deinen Links hast und das bei dir für externe Links spricht, kannst du es natürlich auch folgendermaßen nutzen:

a[target="_blank"]{
    /* Styling */
}

CSS Links stylen + Icon

Natürlich kannst du auch Pseudo-Elemente wie ein After verwenden, um ein zusätzliches Icon bei Links darzustellen. Hier einmal ein Beispiel mit den Material Icons von Google, die ich auch für HelloCoding verwende. Das Content Attribut definiert das Icon. Das Schöne bei Material Icons ist, dass die Icons natürlich benannt sind und es sich um keine Codes handelt, die man sich nicht merken kann (wie bei anderen Icon Fonts).

a[href^="http://" i]:not([href*="hellocoding.de" i]):after,
a[href^="https://" i]:not([href*="hellocoding.de" i]):after{
    font-family: "Material Icons";
    font-size: 1.25rem;
    content: 'link';
    position: relative;
    top: 3px;
    left: 5px;
}

Die Icons von Material Icons kannst du hier finden: https://material.io/resources/icons/

Den offiziellen Guide für Developer findest du unter: https://google.github.io/material-design-icons/

SCSS Mixin für interne und externe Links

Falls du SASS bzw SCSS verwendest, habe ich hier noch ein Mixin für dich geschrieben, das den Umgang mit den internen und externen Selektoren einfacher macht. Nachfolgend erkläre ich die Verwendung.

@mixin externLink($domain) {
    a[href^="http://" i]:not([href*="#{$domain}" i]),
    a[href^="https://" i]:not([href*="#{$domain}" i]){
        @content;
    }
}

@mixin internLink($domain) {
    a[href*="#{$domain}" i],a:not([href^="http" i]){
        @content;
    }
}

Verwendung des SCSS MixIns

Die Verwendung des MixIns ist ziemlich leicht. Als erstes muss du ein @include schreiben, um ein SCSS MixIn abzurufen. In diesem Fall wählen wir das für externe Links. Danach musst du die Domain deiner Webseite eingeben. Wie gewohnt kannst du nun in geschwungenen Klammern deine Style-Anweisungen angeben.

@include externLink("hellocoding.de"){
  text-decoration:none;
  padding: 20px;
  display: block;
  color: #fff;
  font-family: sans-serif;
  background: green;
}

Mit Javascript einen Externen oder Internen Link Erkennen!

Manchmal reicht CSS zum Selektieren der Links nicht auch weil zusätzliche Attribute für Externe oder Interne Links Vergeben werden soll wie rel=nofollow oder target=_blank das ist einfach mit dieser Funktion möglich. Als erstes hole ich alle a-Tags von der Seite habe ich diese schaut sich Javascript Jeden Link an und Prüft ob der host mit der Webseite identisch ist oder nicht.

In diesem Fall Prüfen wir durch !== ob er nicht Identisch ist also ein Externer Links ist das der Fall geben wir den Link das Target=_blank Attribute anderenfalls machen wir nichts. Das kann ganz einfach umgedreht werden für Interne Links in dem man das Ausrufezeichen aus dem Code Löscht.

    var elements = document.getElementsByTagName('a');

    for (var i=0; i<elements.length; i++) {
      if(elements[i].host !== window.location.host){
         elements[i].setAttribute('target', '_blank');
      }
    }