Kennzeichnung von Links in HTML-Dokumenten
Bei der Gestaltung einer Website sollten Links gut als eben solche erkennbar sein - am besten unterstrichen und in dem gewohnten blauen Farbton, damit der Nutzer sie im Fließtext erkennen kann (in der Navigation ist das nicht von vergleichbarer Wichtigkeit, weil dort mit “klickbaren” Texten gerechnet wird).
Bestimmte Arten von Links möchte man oft dennoch abweichend kennzeichnen - zum Beispiel “mailto:“-Links, also solche, die nicht auf eine andere Webressource, sondern auf eine E-Mail-Adresse zeigen, und vielleicht auch andere Links, deren URL ein ungewohntes Protokoll enthält.
Kennzeichnung von Links mit Grafiken
Man könnte solche Links in verschiedenen Farben anzeigen, aber das wäre alles andere als selbsterklärend, und der Websurfer heutiger Tage dürfte wohl kaum erst eine Erläuterungseite zur Gestaltung der betrachteten Webpräsenz studieren wollen, um sich zu vergewissern, was ihm ungewohnte Farben und Symbole sagen wollen. Unmissverständlich hingegen ist ein Icon, für eine E-Mail-Adresse bspw. ein Briefumschlag (früher auch gerne ein - am besten blinkendes oder rotierendes - @-Symbol). Auf diese Weise kann man Links auf E-Mail-Adressen zum Beispiel so auszeichnen:
<img src="/imgs/envelope.gif" /> <a href="mailto:thh@inter.net">thh@inter.net</a>
Für den Fall, dass häufiger Mailadressen im Text vorkommen, ist das allerdings etwas aufwendig, vor allem, wenn man das Prinzip auch noch auf andere Arten von Links ausdehnen möchte. Werden die Webseiten ohnehin durch eine Skriptsprache generiert, bspw. durch PHP, kann man stattdessen natürlich eine passende Funktion verwenden, die bspw. über den Aufruf mailto('thh@inter.net') die obige Ausgabe erzeigt. So richtig elegant ist das aber immer noch nicht.
Kennzeichnung mit Grafiken durch CSS-Klassen
Deutlich eleganter funktioniert es, wenn man den entsprechenden Links stattdessen eine spezielle CSS-Klasse zuweist und die passende Grafik auf diese Weise (als Hintergrundgrafik) einblendet, bspw. so:
a.mailto {
color : #00f;
text-decoration: none;
margin-left : 3px;
padding-left : 20px;
background : url(envelope.gif) no-repeat left;
}
Ein Link der Form <a class="mailto" href="mailto:thh@inter.net">thh@inter.net</a> wird auf diese Weise in blauer Schriftfarne und ohne Unterstreichung dargestellt; außerdem wird links von dem Linktext das Symbol eines Briefumschlags eingeblendet. Das ist schon ganz schick, erfordert aber jeweils die Zuweisung einer passenden Klasse für jeden einzelnen Link - also wiederum Schreibaufwand. Und was ist mit automatisch generierten HTML-Seiten, bspw. solchen, die aus Markdown heraus erzeugt werden, oder in denen aus anderen Gründen diesen Links nicht die richtige Klasse zugewiesen ist?
Kennzeichnung mit Grafiken durch CSS-Attributselektoren
Auch dafür gibt es eine Lösung. Mit CSS 3.0 lässt sich das Prinzip nämlich noch schöner (und einfacher) umsetzen, und zwar mit sog. Attributselektoren.
Damit kann die Anwendung einer CSS-Definition auf Elemente beschränkt werden, deren Attribute einen bestimmten Wert enthalten oder, ab CSS 3.0, mit einem bestimmten Wert beginnen. Und unsere vorstehende Definition soll ja gerade nur auf Links (also <a>-Elemente) angewandt werden, deren Attribut href mit dem Wert mailto: beginnt. Voilà:
a[href^="mailto:"] {
color : #00f;
text-decoration: none;
margin-left : 3px;
padding-left : 20px;
background : url(envelope.gif) no-repeat left;
}
Diese Definition sorgt dafür, dass jeder Link der Form <a href="mailto:thh@inter.net">thh@inter.net</a> ohne weitere Zuweisung einer CSS-Klasse automatisch wie im vorigen Beispiel formatiert wird, einschließlich der links davon eingeblendeten Grafik mit dem Briefumschlag.
CSS-Attributselektoren und Icons
Statt der Verwendung einer Grafik kann man jetzt noch einen Schritt weiter gehen und Symbole oder Icons aus einem Iconfont wie GLYPHICONS oder Font Awesome zusammen mit dem CSS-Pseudoelement :before verwenden, die dann auch von der Größe her an den Text angepasst sind.
Dazu müssen zunächst die Schriftart an sich und die entsprechenden CSS-Definitionen (heruntergeladen und) eingebunden werden. In der einfachsten Fassung genügt aber zunächst im <head>-Segment der Webseite die Zeile:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Die CSS-Definition könnte dann wie folgt aussehen:
a[href^="mailto:"]:before {
/* Unicode-Wert f0e0 fuer "envelope"
http://fontawesome.io/icon/envelope/ */
content: "\f0e0";
position: relative;
top: 2px;
display: inline-block;
padding-left: 3px;
padding-right: 4px;
line-height: 1;
font-family: 'FontAwesome';
font-style: normal;
font-weight: normal;
font-size: 90%;
}
Ein zusätzliches
a[href^="mailto:"] {
text-decoration: none;
}
unterbindet dann noch die Unterstreichung des Links.
Auf dieselbe Weise kann jedes beliebige Icon vor (oder hinter) ein Element gesetzt werden; notwendig ist nur die Angabe der richtigen font-family und des Unicode-Wertes des jeweiligen Zeichens, eingeleitet mit dem Backslash \, als content-Wert.
Andere Arten von Links kennzeichnen
In gleicher Weise lassen sich bspw. externe Links, also solche, die auf Ressourcen außerhalb der eigenen Website zeigen, oder Links, die sich in einem neuen Fenster oder Tab öffnen sollen, kennzeichnen. Ebenso können Links mit anderen Protokollen gekennzeichnet werden.
Die passenden Attributselektoren würden lauten
a[href^="http"]:beforefür externe Links, die mithttpoderhttpsbeginnen,a[href^="ftp"]:beforefür das Protokoll FTP oder aucha[target^="_blank"]:beforefür Links, die sich in einem neuen Fenster oder Tab öffnen sollen.
Der Phantasie sind insoweit keine Grenzen gesetzt.
Ausgabe der Symbole unterdrücken
Soll ein Link einmal ausnahmsweise nicht gekennzeichnet werden, weil er sich bspw. in einem Navigationselement befindet, kann eine CSS-Klasse wie
.no-symbols a:before {
content: none;
}
definiert werden, die dann dem umgebenden Element des Links zugewiesen wird, also bspw. so:
<p class="no-symbols"><a href="mailto:thh@inter.net">thh@inter.net</a></p>
So lassen sich also mit diesen einfachen Definitionen Links quasi “magisch” mit passenden Symbolen versehen - oder eben auch gerade nicht, je nachdem, wie der Kontext es erfordert.
[Dieser Eintrag wurde nachträglich im Februar 2015 veröffentlicht.]
Kommentare
Ansicht der Kommentare: Linear | Verschachtelt