Webseiten professionell Wiki: (CSS) Automatische Link-Icons

(CSS) Automatische Link-Icons

Startseite » Code-Schnipsel » (CSS) Automatische Link-Icons

Problematik

Die Forderung nach erkennbar typisierten Links ist fast so alt wie es Hypertext gibt. Vor allem aus Sicht des Benutzers einer Website ist es wichtig, dass er intuitiv erkennen kann, ob ein Link zu einer völlig anderen, externen Quelle führt, oder vielleicht auf einen Inhalt, der gar nicht vom Browser selbst angezeigt werden kann. Auch Links, die ein neues Fenster bzw. einen neuen Tab öffnen, sind anwenderfreundlicher, wenn sie als solche gekennzeichnet werden. Nun ist das jedmalige Voran- oder Hintenanstellen einer link-kennzeichnenden Icon-Grafik ziemlich mühsam und wird vor allem in CMS-Umgebungen ungern genutzt. Abhilfe schafft hier die Lösung, Links bereits im zentralen Stylesheet zu unterscheiden und entsprechend zu kennzeichnen. In HTML genügt es dann beispielsweise, <a href="http://www.example.org/">…</a> zu notieren, und der Link wird automatisch mit einem Icon für externe Links versehen.

Code

a {
   color: #0000AA;
}
a[href ^="http://"] {
   color: #0066BB;
    background: url(/src/external.png) center right no-repeat;
    padding-right: 13px;
}
a[href ^="gopher://"] {
   color: #0066BB;
    background: url(/src/external.png) center right no-repeat;
    padding-right: 13px;
}
a[href ^="https://"] {
   color: #0066BB;
    background: url(/src/lock_icon.gif) center right no-repeat;
    padding-right: 16px;
}
a[href ^="mailto:"] {
   color: #0066BB;
    background: url(/src/mail_icon.gif) center right no-repeat;
    padding-right: 18px;
}
a[href ^="news://"] {
   color: #0066BB;
    background: url(/src/news_icon.png) center right no-repeat;
    padding-right: 18px;
}
a[href ^="ftp://"] {
   color: #0066BB;
    background: url(/src/file_icon.gif) center right no-repeat;
    padding-right: 18px;
}
a[href ^="irc://"] {
   color: #0066BB;
    background: url(/src/discussionitem_icon.gif) center right no-repeat;
    padding-right: 18px;
}
a[href $=".ogg"], a[href $=".OGG"],
a[href $=".mid"], a[href $=".MID"],
a[href $=".midi"], a[href $=".MIDI"],
a[href $=".mp3"], a[href $=".MP3"],
a[href $=".wav"], a[href $=".WAV"],
a[href $=".wma"], a[href $=".WMA"] {
    background: url("/src/audio.png") center left no-repeat;
    padding-left: 19px;
}
a[href $=".ogm"], a[href $=".OGM"],
a[href $=".avi"], a[href $=".AVI"],
a[href $=".mpeg"], a[href $=".MPEG"],
a[href $=".mpg"], a[href $=".MPG"] {
    background: url("/src/video.png") center left no-repeat;
    padding-left: 19px;
}
a[href $=".pdf"], a[href $=".PDF"],
a[href *=".pdf#"], a[href *=".PDF#"],
a[href *=".pdf?"], a[href *=".PDF?"] {
    background: url("/src/document.png") center left no-repeat;
    padding-left: 19px;
}
a[href $=".zip"], a[href $=".ZIP"],
a[href $=".rar"], a[href $=".RAR"],
a[href $=".exe"], a[href $=".EXE"],
a[href $=".msi"], a[href $=".MSI"],
a[href $=".dmg"], a[href $=".DMG"],
a[href $=".gz"], a[href $=".GZ"],
a[href *=".gzip"], a[href *=".GZIP"] {
    background: url("/src/download.png") center left no-repeat;
    padding-left: 19px;
}

Erläuterung

Der Code stellt einen denkbaren Ausschnitt aus einem zentralen Stylesheet dar. Definiert wird das Erscheinungsbild von Links, also von a-Elementen. Dabei wird intensiv mit attributbedingten Selektoren gearbeitet. Diese funktionieren nicht im Internet Explorer 6, weshalb je nach Site leider immer noch ein Zehntel bis ein Drittel der Besucher von den so definierten Features nichts mitbekommt. Da es sich jedoch um ein automatisches Service-Feature handelt, erscheint der Ausschluss dieses längst nicht mehr aktuellen Browsers durchaus gerechtfertigt. Wenn Sie sich die Mühe machen wollen, können Sie für den IE 6 mit etwas Scripting nachhelfen. Dazu können Sie beispielsweise das Microsoft-DOM verwenden und mit document.all.tags['a'] alle a-Elemente eines HTML-Dokuments in einer Schleife daraufhin prüfen, ob deren href-Attribut einem bestimmten regulären Ausdruck entspricht. Wenn ja, können über document.all.tags['a'][#].style die Style-Eigenschaften des betreffenden Elements geändert werden.

Doch zurück zu unseren Style-Definitionen. Mit dem Selektor a[href ^="http://"] werden beispielsweise Links ausgewählt, deren href-Attributwert mit http:// beginnt. Das ^-Zeichen kommt übrigens aus der Syntax für reguläre Ausdrücke. Analog werden Links auf Ziele mit anderen Internet-Protokollen behandelt. Dabei wird die Annahme zugrunde gelegt, dass Links mit vollständigen URI-Angaben zu externen Zielen führen, während interne Links nur Pfadnamenangaben enthalten.

Doch nicht nur Links auf externe Quellen werden erkannt, sondern auch Links auf diverse Non-HTML-Inhalte. Dazu wird die Dateiendung der verlinkten Ressource herangezogen. Mit a[href $=".ogg"] werden beispielsweise Links erkannt, deren href-Attributwert auf .ogg endet (die Dateiendung ogg gehört einem stark komprimierenden Audio-Format an, einem Konkurrenzformat zu MP3). Ähnlich wird mit einer ganzen Reihe anderer Dateiendungen verfahren.

In den Formatdefinitionen unserer Beispiel-Selektoren erhalten ein paar Links abweichende Farben (color-Eigenschaft). Alle erhalten dagegen mit background eine Hintergrundgrafik; außerdem wird mit padding-left oder padding-right ein Innenabstand links oder rechts definiert. Beide Angaben in Kombination bewirken einen Trick, der sich z.B. beim Layout von Wikipedia bestens bewährt. Die Hintergrundgrafik ist ein kleines Icon, das geeignet ist, vor oder hinter einem Wort zu stehen und nicht die Zeilenhöhe des Fließtextes zu sprengen. Mit center left no-repeat bzw. center right no-repeat wird diese Grafik nur einmalig angezeigt (kein Wallpaper-Effekt). Ausgerichtet wird sie mittig zur Umgebung links außen bzw. rechts außen. Die padding-left- oder padding-right-Angabe sorgt dafür, dass vor bzw. hinter dem Linktext ein zusätzlicher Element-Erstreckungsraum eingefügt wird. So wird erreicht, dass die Hintergrundgrafik ordentlich vor bzw. hinter dem a-Elementinhalt, also dem Linktext, platziert wird.

Die im Code-Beispiel angenommenen Icons basieren auf folgenden Grafiken (Sie dürfen diese Grafiken gerne kopieren):