Externe und Interne Links Kennzeichen
Kategorie:
Veröffentlicht: 12.11.2019
Dein Netzwerk ist offline, deshalb laden wir die gesamte Seite aus dem Cache. Beachte: die Inhalte könnten veraltet sein! Für aktuelle Inhalte aktiviere bitte dein Internet.
Hallo liebe Nutzer,
da wir als Coding-Plattform und Webentwickler ausschließlich auf aktuelle Technologien setzen, unterstützen wir keine veralteten Internetbrowser. Bitte schau dir doch ein paar der tollen Alternativen an, bestimmt findest du hier einen für dich passenden modernen Browser!

Benachrichtigungen

Bleib immer mit aktuellen Informationen auf dem Laufenden, dein Browser informiert dich über neue Artikel und wichtige Hinweise von uns!

Externe und interne Links Erkennen

Inhaltsverzeichnis
[[TABLE OF CONTENTS]]
access_timeGeschätzte Lesezeit c.a 6 Minuten

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.

/* Vollständiges Beispiel */
.wrap a {
  text-decoration: none;
  padding: 20px;
  display: block;
  color: #fff;
  font-family: sans-serif;
}

.wrap a[href^="http://" i]:not([href*="hellocoding.de" i]),
.wrap a[href^="https://" i]:not([href*="hellocoding.de" i]) {
  text-decoration: none;
  padding: 20px;
  display: block;
  color: #fff;
  font-family: sans-serif;
  background: green;
}

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

/* Nur für das Beispiel */
.wrap {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
<div class="wrap">
  
<a href="https://Hellocoding.de">Hello World</a>

<a href="https://google.de">Hello Extern</a>

<a href="http://google.de">Hello Extern</a>

<a href="/">Hello World</a>

<a href="#hello" target="_self">Hello World</a>

</div>

Live Code inhalte sind oft nicht auf Mobil Geräte Optimiert da diese nur Bestimmte Szenarien auf zeigen soll. Falls die Anzeige auf deinen Mobilgeräte nicht tadellos Funktionieren sollte öffne die Seite bitte auf einem Desktop Geräte.

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');
      }
    }


Hinterlasse mir gerne einen Kommentar zum Artikel und wie er dir weitergeholfen hat beziehungsweise, was dir helfen würde, das Thema besser zu verstehen. Oder hast du einen Fehler entdeckt, den ich korrigieren sollte? Schreibe mir auch dazu gerne ein kleines Feedback!

Home Menü Suche
X