#1 externe Links kennzeichnen von florian-zier 22.04.2012 00:36

avatar

Viele Webmaster versehen ihre Links mit dem Attribut target="_blank".
Somit wird vermieden, dass die eigene Website beim Besuchen eines Links sofort verlassen wird.
Obwohl inzwischen sogar empfohlen wird, Links nicht automatisch auf einer neuen Seite / in einem neuem Tab zu öffnen.
Damit den Usern selbst überlassen bleibt, wie sie die Links öffnen.

Oft stellt sich für die User aber die Frage, wie sich der Link öffnen würde.
Möchte man im gleichen Tab bleiben öffnet sich ein neuer Tab und möchtet man einmal einen neuen Tab, verschwindet aus Versehen die aktuelle Seite.
Dies kann bei bereits eingetragenen Formularen oder Ajax-Webseiten sehr ärgerlich werden.

Wäre es jetzt nicht toll, auf einen Blick zu sehen, welche Links auf eine externe Seite verweisen?
Foren-Admins könnten jetzt z.B. einen neuen Foren-Code für solche Links anlegen.
Allerdings müsste dann der Beitrags-Ersteller diese kennen und vorher entscheiden, welche Codes zu nutzen sind.
Und welcher Admin möchte dann noch alle alten Beiträge überarbeiten...


Aber zum Glück gibt es eine Möglichkeit, alle Links automatisch ggf. zu kennzeichnen.
Dabei spielt es keine Rolle, ob es neue Links oder schon längst existierende sind.
Diese Anleitung funktioniert für alle dieser Links, und das sogar ohne JavaScript!


Der folgende CSS-Code macht es möglich:

1
2
3
4
5
6
7
8
9
10
11
12
 
/* externe Links kennzeichnen: */
.mtext a[href^='http://'],
.mtext a[href^='https://'] {
padding-right: 12px;
background: url(http://files.homepagemodules.de/b123484/a_42_efdc211a.png) right no-repeat;
}
/* Ausnahme für Link auf aktuelle Domain: */
.mtext a[href^='http://xxxxxx.homepagemodules.de'],
.mtext a[href^='http://andereDomain.de'] {
padding-right: 0;
background: none;
}
 


Fügt diese Style-Anweisungen in euer Forum ein und ihr habt damit eine Kennzeichnung für externe Links gemacht.

Natürlich müssen noch ein paar Kleinigkeiten angepasst werden.
Bei background könnt ihr eine beliebige Bild-Adresse eintragen, das Bild sollte eben nur in euer Foren-Design passen.
Der hier eher dunkle Pfeil ist z.B. für Foren mit etwas helleren Hintegründen besser geeignet als für dunkle Foren.
Wer jeweils das Wörtchen right durch left ersetzt, sorgt dafür, dass die Links auf der linken Seite markiert werden.

Da alle Links, welche auf http und https anfangen gekennzeichnet werden, kann es passieren, dass auch Links auf die gleiche Domain, also interne, markiert werden.
Deswegen solltet ihr unten noch den Anfang der URLs auf euer Forum / eure Website eintragen.
Damit werden die Regeln für interne Links wieder aufgehoben.
Mehrere Domains werden nach dem gleichen Schema angegeben und zwischen den Angaben mit Kommas getrennt.
Ebenso kann natürlich oben z.B. die Kennzeichnung https entfernt oder ftp etc. ergänzt werden.

Sollte euer Foren-Design schon Pfeilchen hinter den Links einfügen, ist dieser Tipp vielleicht nicht mehr nötig.
Aber hier beim Business-Design habe ich keine Kennzeichnung entdecken können, ich bin mir auch nicht mehr sicher, ob das im Gaia-Design automatisch vorhanden war.
Jedenfalls wollte ich dann doch nicht komplett alle Links so Kennzeichnen, sondern nur die in den Beiträgen selbst, da es sonst im Design wie z.B. der Navigation nicht immer vorteilhaft aussieht.
Deswegen steht vor jeder Anweisung noch ".mtext" dabei, ohne dies würde sich der Style auf das ganze Forum auswirken.
Mit der Angabe bezieht sich der Style aber nur für Links innerhalb des Bereichs mit der Klasse "mtext" (der Punkt davor kennzeichnet, dass es eine CSS-Klasse ist), welcher nur jeweils die eigentlichen Beiträge enthält.
Jetzt wirken sich die Pfeile in der Navigation nicht mehr als störend aus.
Wenn ihr alles global verändern möchtet, müsst ihr nur die Angabe entfernen.
Alternativ müsst ihr sie durch einen anderen CSS-Selektor (Angabe zum ansprechen von nur bestimmten Elementen)  ersetzen, sofern euer Template nicht die Klasse ".mtext" besitzt und die Beiträge sich in einem Element mit anderer Klasse/ID befinden.



Die Idee dazu stammt aus dem tollen Beitrag Externe Links kennzeichnen.
Dort wird auch gezeigt, wie man Links auf Dateien, z.B. PDFs speziell markiert.

Der Artikel selbst bezieht sich wiederum auf den für Vier CSS3-Tricks für sauberes HTML, welcher noch Markierungen für Mail-Adressen zeigt.
Zusätzlich gibt es dort ein Beispiel, wie man ohne JavaScript Tabellen-Zeilen abwechselnd in einer anderen Farbe kennzeichnen kann.

Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen
Datenschutz