Zusammenfassung
		Name:	Link-Kennzeichnung
		Aufgabe:	Beispiel, wie man (mit wenig Aufwand & IE-kompatibel) das Ziel eines Links durch Icon oder Farbe symbolisiert.
		Benötigt:	Icons: CSS 2 (IE: JScript 1.0) Marker: CSS 1
		Beispiel:	Testseite
		Download:	linksign.zip

Praktisch, wenn der Surfer auf den ersten Blick erkennen kann, welcher Art der Link ist, auf den er klicken soll. Unpraktisch, wenn dem Web-Autor damit relativ viel Arbeit - auch in der späteren Pflege, z.B. bei Änderungen - aufgebürdet wird.
Anstatt nun als z.B. vor jeden (Text-)Link mittels IMG-Tag eine kleine Grafik zu setzen, läßt sich gleiches auch mit CSS erreichen. Ab CSS-Version 2 gibt es die Anweisung :before, mit der man Daten vor einer CSS-Klasse einfügen kann - auch Grafiken.
Die ganze aktuelle Browserwelt kann diesen Effekt nutzen. Die ganze Browserwelt? Nein! Ein kleines Dorf in den USA, Redmond, leistet (noch) Widerstand. ;) Ausgerechnet der Internet Explorer (jedenfalls bis Version 7 inklusive) unterstützt diese Anweisung nicht. :-( Aber es geht doch - mit Hilfe von CSS-Version 1. Als Beispiel dienen die Definitionen des "Schatzkästleins":

 a.css:before      { content:url(img/css.gif); border:0px; }
 a.dhtml:before    { content:url(img/dhtml.gif); border:0px; }
 a.html:before     { content:url(img/html.gif); border:0px; }
 a.gfabas:before   { content:url(img/gfabas.gif); border:0px; }
 a.jscript:before  { content:url(img/jscript.gif); border:0px; }
 a.server:before   { content:url(img/server.gif); border:0px; }
 a.file:before     { content:url(img/file.gif); border:0px; }
 a.de:before       { content:url(img/de.gif); border:0px; }
 a.en:before       { content:url(img/en.gif); border:0px; }
 a.mail:before     { content:url(img/mail.gif); border:0px; }

 a.css             { display:inline-block; background-image:url(img/css.gif); padding-left:27px; background-repeat:no-repeat; background-position:center left; border:0px; }
 a.dhtml           { display:inline-block; background-image:url(img/dhtml.gif); padding-left:39px; background-repeat:no-repeat; background-position:center left; border:0px; }
 a.html            { display:inline-block; background-image:url(img/html.gif); padding-left:33px; background-repeat:no-repeat; background-position:center left; border:0px; }
 a.gfabas          { display:inline-block; background-image:url(img/gfabas.gif); padding-left:27px; background-repeat:no-repeat; background-position:center left; border:0px; }
 a.jscript         { display:inline-block; background-image:url(img/jscript.gif); padding-left:21px; background-repeat:no-repeat; background-position:center left; border:0px; }
 a.server          { display:inline-block; background-image:url(img/server.gif); padding-left:27px; background-repeat:no-repeat; background-position:center left; border:0px; }
 a.file            { display:inline-block; background-image:url(img/file.gif); padding-left:13px; background-repeat:no-repeat; background-position:center left; border:0px; }
 a.de              { display:inline-block; background-image:url(img/de.gif); padding-left:20px; background-repeat:no-repeat; background-position:center left; border:0px; }
 a.en              { display:inline-block; background-image:url(img/en.gif); padding-left:20px; background-repeat:no-repeat; background-position:center left; border:0px; }
 a.mail            { display:inline-block; background-image:url(img/mail.gif); padding-left:19px; background-repeat:no-repeat; background-position:center left; border:0px; }

Als Workaround wird hierbei mit CSS 1 eine Hintergrundgrafik für den Link definiert. Der Nachteil: Zum einen muß in jeder CSS-Regel die Breite der jeweiligen Grafik angegeben werden, zum anderen darf innerhalb des Links kein Umbruch erfolgen, da die Hintergrundgrafik dann verrutscht. Der Umbruch muß dabei mit display:inline-block (CSS 2.1) verhindert werden, da das übliche white-space:nowrap aufgrund eines Bugs im IE 6 unter Umständen zu einem Darstellungsfehler führen kann. Da aber diese Lösung wiederum in Opera zu einer etwas abweichenden Darstellung führt (die Höhe und damit die Position des Elements ändert sich geringfügig) und außerdem die "korrekte" CSS-2-Variante aufgrund des möglichen Zeilenumbruchs optisch eleganter ist, gilt: CSS-Datei mit 2er-Unterstützung (:before) ganz normal im HTML-Header einbinden, und dann nur im IE mit JScript oder Conditional Comment den Workaround nachladen (tunlichst erst ab IE 5.5 und nur bis Version 7 inkl., s. Link-Testseite, da der IE seit Version 8 :before ebenfalls unterstützt).

<link rel="stylesheet" type="text/css" href="all_browsers.css">
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="old_ies.css"><![endif]-->

Eine gänzlich andere Möglichkeit wäre, auf Link-Icons zu verzichten und einfach nur die Links farblich zu formatieren. Dafür gelten allerdings ein paar Einschränkungen: Dem Surfer wird mehr "Hirnschmalz" abverlangt, da er nicht unmittelbar von der Farbe auf das Linkziel schließen kann (klarer Vorteil für Icons, die mit Schrift oder Symbolik dies unterstützen - bei Farben könnte aber ggf. auch der jeweilige Zielbereich diesen "Farbcode" wieder aufnehmen). Zudem könnte der Bildschirm des Surfers monochrom, bzw. der Surfer auch farbenblind sein (was die Möglichkeit zur Farbunterscheidung zumindest einschränkt).

Textmarker-Farben wären z.B. Violett, Pink, Blau, Hellblau, Grün, Gelb, oder Orange.

 a.violet         { color:#000000; background-color:#FFBBFF; padding-left:0.2em; padding-right:0.2em; text-decoration:none; }
 a.pink           { color:#000000; background-color:#FFBBCC; padding-left:0.2em; padding-right:0.2em; text-decoration:none; }
 a.blue           { color:#000000; background-color:#AAAAFF; padding-left:0.2em; padding-right:0.2em; text-decoration:none; }
 a.azure          { color:#000000; background-color:#BBDDFF; padding-left:0.2em; padding-right:0.2em; text-decoration:none; }
 a.green          { color:#000000; background-color:#BBFF33; padding-left:0.2em; padding-right:0.2em; text-decoration:none; }
 a.yellow         { color:#000000; background-color:#F3F600; padding-left:0.2em; padding-right:0.2em; text-decoration:none; }
 a.orange         { color:#000000; background-color:#FFAA55; padding-left:0.2em; padding-right:0.2em; text-decoration:none; }

 /* Nicht fuer alten Navigator */
 @media screen {
  a.violet        { padding-left:0.2em; padding-right:0.2em; }
  a.pink          { padding-left:0.2em; padding-right:0.2em; }
  a.blue          { padding-left:0.2em; padding-right:0.2em; }
  a.azure         { padding-left:0.2em; padding-right:0.2em; }
  a.green         { padding-left:0.2em; padding-right:0.2em; }
  a.yellow        { padding-left:0.2em; padding-right:0.2em; }
  a.orange        { padding-left:0.2em; padding-right:0.2em; }
 }

Und natürlich kann man im Style-Sheet für die Druckausgabe die Kennzeichnung weglassen. Auf Papier gibt es ja schließlich auch nichts anzuklicken. Dafür möchte aber der Leser vielleicht sehen, daß es sich um einen Link gehandelt hat und wohin dieser führt (um ihn auszuprobieren). Hierzu kann der Web-Autor einfach den URL hinter den Link als Text schreiben, diesen Text aber im Style-Sheet für den Bildschirm unsichtbar machen. Voilá: Der Surfer sieht die Link-Icons, der Leser die URLs.