Webdesign - Der Umgang mit externen Seitenaufrufe

  1. Zum Inhalt springen

webdesign
klamonfra
Klaus Franz


Wie gehen wir mit dem Aufruf von anderen Webseiten um?

16Mär2014

Der Umgang mit externen Seitenaufrufe


Ein umstrittenes Thema bei der Gestaltung von Webseiten ist das Öffnen von externen Seiten in neuen Fenstern.
Das Gremium zur Standardisierung der Techniken rund um das Internet, das W3C (World Wide Web Consortium), empfiehlt, dass es jedem Benutzer freigestellt ist wie er mit dem Aufruf zu einer anderen Webseite umgeht.
Der Besucher kann sie im gleichen oder in einem neuen Fenster oder Tab öffnen.

Auch ich überlasse die Wahl den Besuchern dieser Webseiten!

Grundsätzlich gehen die Seiten auf dieser Website im gleichen Fenster auf, egal ob Sie zu einer fremden Webseite oder zu einer Webseite innerhalb dieser Domaine www.webdesign-klamonfra.de (Webgestaltung von Klaus und Monika Franz) springen. Wer aber andere Seiten in einem neuen Fenster öffnen will, kann das zum Beispiel folgendermaßen tun:

externer Seitenaufruf

  • Mit "Klick der rechten Maustaste" und dann die entsprechende Auswahl im Kontextmenue treffen (zum Beispiel: Seite in neuem Tab oder Fenster öffnen)
  • Noch schneller lassen sich Seitenaufrufe mit der Kombination [Strg-Taste] und "Klick mit der linken Maustaste" in einem neuen Tab öffnen
  • Mit der [Shift-Taste] und "Klick der linken Maustaste" öffnet sich die Seite in einem neuen Fenster

Damit sich ein Seitenaufruf zu einer anderen Website besser von einem internen Seitenaufruf abhebt, werden diese mit einem Pfeil gekennzeichnet. Dieser wechselt beim Überfahren mit dem Mauszeiger sein Aussehen und wird mit dem Pseudo-Element ":after" realisiert. Der Hintergrund eines externen Seitenaufrufs geht dabei von links nach rechts innerhalb einer halben Sekunde in eine hellgraue Farbe über und dafür wird das Pseudo-Element ":before" benutzt.

Beispiellink zu einer fremden Website

Der Code sieht hierfür wie folgt aus:

<a class="extern" href="http://www.klamonfra.de/bedienung.php"
    title="Externer Seitenaufruf:
           Ein Beispiellink zu einer fremden Website">
    Beispiellink zu einer fremden Website
</a>

Und im CSS (Cascading Style Sheet) sind dafür die folgenden Zeilen notwendig:

a.extern {
    position: relative;
    color: #0972b4;
    display: inline-block;
    vertical-align: bottom;
    letter-spacing: .2em;
}

a.extern:before {
    position: absolute;
    content: '';
    z-index: 1;
    width: 0;
    height: 100%;
    border-radius: 5px;
    background: rgba(52,73,94,.2);
    transition: .5s;
}

a.extern:hover:before,
a.extern:focus:before {
    width: 100%;
}

a:link.extern:after {
    content: '➤';
}

a:visited.extern:after {
    content: '➢';
}

a:hover.extern:after,
a:focus.extern:after {
    content: '➔';
}

Früher hatte ich die Pfeile noch mit einem separaten Bild dargestellt, aber es geht auch rein mit der CSS (Cascading Style Sheet)-Eigenschaft "content: ''". Und ich spare mir sogar noch eine weitere Anfrage, ein sogenannter HTTP-Request (Hypertext Transfer Protocol Anforderung), an den Webserver.


Achtung! Einschränkungen bei der Gestaltung von ":visited"

Vor längerer Zeit wurde bereits angekündigt, dass die CSS (Cascading Style Sheet) Pseudoklasse ":visited" aus Sicherheitsgründen nicht mehr unterstützt wird und mittlerweile setzen das einige Browser schon um.
Hat man eine Website oder einen Verweis zu einer anderen Seite innerhalb der Domaine bereits besucht, lassen sich mit der Pseudoklasse ":visited" im Internet Explorer 8 sowohl Farbe als auch das Symbol noch wechseln. Im Internet Explorer 11 lässt sich nur noch die Farbe wechseln und der Firefox ignoriert die Pseudoklasse ":visited" vollständig!

Noch lasse ich die Angabe ":visited" in diesem Projekt, aber über kurz oder lang fliegt diese Angabe aus dem CSS (Cascading Style Sheet) raus. Leider lassen sich dann besuchte Seiten nicht mehr kennzeichnen!


12Sep2015

Auf die Klassenangabe "extern" kann verzichtet werden


Ab heute habe ich die Angabe ":visited" auf diesen Webseiten entfernt!

Die Methode mit der Kennzeichnung der externen Seitenaufrufe funktioniert in allen Browsern, aber auf die zusätzliche Angabe der Klasse "extern" kann man mit einem Trick auch noch verzichten.

Die elegantere Möglichkeit besteht beim "CSS3 (Cascading Style Sheet)" daraus, dass ich einen Teil des Attributwertes mit einer Zeichenfolge vergleichen kann. Hierbei werden die CSS (Cascading Style Sheet)-Eigenschaften allen Verweisen zugewiesen, die mit der Zeichenkette "http:" beginnen. Ich brauche also nur das ".extern" aus dem obigen Beispiel mit "[href^="http:"]" zu ersetzen. Die benötigten CSS (Cascading Style Sheet)-Angaben lauten damit:

a[href^="http:"] {
    position: relative;
    color: #0972b4;
    display: inline-block;
    vertical-align: bottom;
    letter-spacing: .2em;
}

a[href^="http:"]:before {
    position: absolute;
    content: '';
    z-index: 1;
    width: 0;
    height: 100%;
    border-radius: 5px;
    background: rgba(52,73,94,.2);
    transition: .5s;
}

a[href^="http:"]:hover:before,
a[href^="http:"]:focus:before {
    width: 100%;
}

a[href^="http:"]:link:after {
    content: '➤';
}

a[href^="http:"]:hover:after,
a[href^="http:"]:focus:after {
    content: '➔';
}

Im HTML (HyperText Markup Language)-Teil reicht nun ein ganz normaler Verweis ohne eine Klassenzuweisung:

<a href="http://www.klamonfra.de/bedienung.php"
    title="Externer Seitenaufruf:
           Ein Beispiellink zu einer fremden Website">
    Beispiellink zu einer fremden Website
</a>

Anhand der Zeichenfolge "http:" wird nun automatisch erkannt, dass es sich um einen externen Verweis handelt. Voraussetzung ist natürlich, dass alle internen Verweise mit relativen und nicht mit absoluten URL-Pfaden angegeben werden. Aber auch wenn man das auf einigen Seiten nicht beachtet haben sollte, gibt es hierfür eine einfache Lösung. So wie bei den externen Verweisen kann man auch die eigenen Webseiten anhand ihrer Zeichenkette erkennen und setzt die entsprechenden CSS (Cascading Style Sheet)-Angaben wie folgt zurück:

a[href^="http://www.webdesign-klamonfra.de"] {
    letter-spacing: normal;
}

a[href^="http://www.webdesign-klamonfra.de"]:before {
    width: 100%;
    border-radius: 0;
    background: transparent;
    transition: 0s;
}

a[href^="http://www.webdesign-klamonfra.de"]:link:after {
    content: '';
}

Der Abstand der Buchstaben wird wieder auf normal eingestellt, der Hintergrund bleibt transparent und der Pfeil wird gelöscht.

Das ist nun eine sehr elegante Methode um für die Besucher einer Website die externen von den internen Verweisen unterschiedlich zu kennzeichnen.


Externe Seitenaufrufe in einem neuen Fenster öffnen

Kommt man im Laufe eines Projektes irgendwann einmal auf die Idee, dass sich externe Seiten in einem neuen Fenster öffnen sollen, müsste man sämtliche Seiten überarbeiten. Das ist natürlich sehr viel Arbeit, aber es geht auch einfacher.
Mit dem nachfolgenden Code-Schnipsel werden externe Seiten automatisch mit einem "target="_blank"" versehen. Dabei wird der Attribut-Selektor nach "http://" abgefragt und die eigene Domaine von der Regel ausgenommen.

$(function () {
    $("a[href*="http://"]:not
      ([href*="http://www.webdesign-klamonfra.de/"])")
    .attr({target: "_blank"});
} )

Nun öffnen sich alle Seiten zu einer anderen Webseite in einem neuen Fenster!

Zum Seitenanfang springen Λ