CSS: Links mit Symbolen versehen

KATEGORIE: (X)HTML & CSS, TIPPS VOM 23.08.2011 0

Ohne weitere Auszeichnungen werden Hyperlinks in HTML vom Browser standardmäßig farbig und unterstrichen dargestellt. Mit CSS kann die vorgegebene Auszeichnung überschrieben und den individuellen Wünschen angepasst werden.

Unformatierter Link

Symbole dienen dem Verständnis

Links mit Symbolen zu versehen ist nicht nur ein hübsches Extra für das Auge, sondern für den Benutzer ein hilfreicher Hinweis, was ihn hinter dem Link erwartet. Dies ist in der Regel ein weiteres HTML-Dokument, kann aber ebenso auch ein Dokument anderen Formates sein, wie bspw. ein PDF-, Word- oder Textdokument, aber auch ein Bild, eine Sounddatei oder ein Archivdatei (.zip, .rar), für die ein Download gestartet wird. Solchermaßen informiert, steht es dem Benutzer frei den Link zu aktivieren oder auch nicht. Bei der Auswahl der Symbole ist selbstverständlich darauf zu achten, dass sie auch mit der Aktion in Verbindung gebracht werden kann, also verstanden werden.

Version 1: Eine Klasse erstellen

Wie kann man nun das Symbol dem Link anhängen? Die Methode richtet sich nach den Browserversionen, die hauptsächlich von der anvisierten Zielgruppe verwendet wird. Je älter der Browser, umso aufwändiger ist die CSS-Formatierung. Der simpelste Weg ist das Erstellen einer separaten Klasse für den Link.

Das Stylesheet:
a.pdf {
padding-right: 20px;
background: transparent url(icons/pdf.gif) no-repeat right;}

Der HTML-Code:
Dieser Text kann auch als <a href="text.pdf" class="pdf">PDF-Dokument</a> betrachtet werden.

Symbol mit CSS-Klasse anfügen
Der Klasse wird das entsprechende Symbol als Hintergrundbild zugeordnet und rechts neben dem Text positioniert. Der Innenabstand (padding) sollte mindestens der Breite des Bildes entsprechen, ein paar Pixel mehr heben jedoch die optische Erscheinung.

Der Vorteil dieser Methode ist die hohe Kompatibilität mit älteren Browsern, weil es sich des CSS Level 1 bedient. Der Nachteil besteht darin, dass im HTML-Code die Klasse jedes Mal notiert werden muss. Wenn verschiedene Symbole eingesetzt werden sollen, erhöht sich der Aufwand daher deutlich.

Version 2: Der Attributselektor

Wer auf ältere Browser pfeift, dem eröffnen sich mit CSS 3 praktikablere Möglichkeiten. Um bei dem letzten Beispiel zu bleiben, findet das folgende Stylesheet alle Links mit der Dateiendung .pdf und fügt diesen das festgelegte Symbol als Hintergrundgrafik an.

Das Stylesheet:
a[href $=".pdf"] {
padding-right: 20px;
background: transparent url(icons/pdf.gif) no-repeat right;}

Der HTML-Code:
Dieser Text kann auch als <a href="text.pdf">PDF-Dokument</a> betrachtet werden.

Hier kommt ein Attributselektor zum Zuge: das obige Stylesheet besagt, wenn innerhalb eines a-Tags der Wert des Attributs href auf „.pdf“ endet, dann werden die Eigenschaften in der geschweiften Klammer gesetzt. Durch das Dollarzeichen $ wird das Ende des href-Attributwertes auf den angegebene Zeichenkette (hier: .pdf) durchsucht.

Der Vorteil liegt auf der Hand: Mit dieser Methode muss nur jeweils eine CSS-Anweisung pro Symbol geschrieben werden; zusätzliche Notierungen im HTML-Code entfallen. Das Ergebnis entspricht optisch dem der CSS-Klasse. Auf diese Art und Weise können natürlich auch verschiedene Dateiendungen zusammengefasst und mit einem einheitlichen Symbol ausgezeichnet werden, somit könnten bspw. unterschiedliche Videoformate dasselbe Symbol erhalten:

a[href $=".wmv"], a[href $=".avi"], a[href $=".mpeg"], a[href $=".mov"], a[href $=".flv"] {
padding-right: 20px;
background: transparent url(icons/movie.gif) no-repeat right;}

Wenn es nun die Möglichkeit gibt nach einer Dateiendung zu selektieren, dann gibt es auch einen Weg nach dem Anfang des href-Attributwertes zu suchen und dies zu nutzen. Auch hier bieten sich sinnvolle Einsätze an: Einer Mailadresse kann ein entsprechendes Symbol zugewiesen werden, einem einfachen Hyperlink wiederum ein anderes als einer sicheren Verbindung.

Das Stylesheet:
a[href ^="mailto:"] {
padding-right: 20px;
background: transparent url(icons/email.gif) no-repeat right;}

a[href ^="http://"] {
padding-right: 20px;
background: transparent url(icons/link.gif) no-repeat right;}

a[href ^="https://"] {
padding-right: 20px;
background: transparent url(icons/lock.gif) no-repeat right;}

Der HTML-Code:
Sie können gerne meine Seite unter <a href="http://www.designimsinn.de">www.designimsinn.de</a> besuchen, oder mir eine <a href="mailto:gibts.nicht@desingimsinn.de">E-Mail</a> schreiben. Nutzen Sie auch die sichere Verbindung zu dem imaginären <a href="https://www.nichtszumshoppen.de">Shop</a>.

Symbol durch Attributselektor anfügen

In diesem Fall ist es das Potenzzeichen ^, das den in Klammern stehenden Wert aus dem Gesamtwert heraussucht.

Variationen mit dem Attributselektor

Der Attributselektor ist auf jedes HTML-Element anwendbar. Möchte man gerne ein neues Browserfenster mit einem Symbol kennzeichnen, so kann auch auf das Attribut target zugegriffen werden. Zum Öffnen eines Hyperlinks in einem neuen Fenster oder Tabulator muss der Wert des Attributs target auf _blank gesetzt werden. Dieser Wert wird folgendermaßen selektiert:

Das Stylesheet:
a[target ="_blank"] {
padding-right: 22px;
background: transparent url(icons/popup.gif) no-repeat right;}

Der HTML-Code:
Sie können gerne meine Seite unter <a href="http://www.designimsinn.de" target="_blank">www.designimsinn.de</a> besuchen. Diese öffnet sich in einem neuen Fenster.

Attributselektor für target

Auf den ersten Blick erscheint der Attributselektor vielleicht sehr kompliziert. Hat man sich aber ein wenig eingelesen und die Funktionsweise verstanden, eröffnen sich vielfältige Möglichkeiten CSS effektiv zu nutzen.

Bleibt noch zu erwähnen, dass es natürlich von Vorteil ist, sich seine eigenen Symbole – passend zum Webdesign – zu erstellen. Eine Höhe von 16 Pixel liegt im optimalen Bereich, 20 Pixel sollten eher nicht überschritten werden. Als Grafikformat ist dem .gif der Vorzug zu geben, .png mit transparentem Hintergrund geht bei den neuen Browsern selbstverständlich auch. Nun ist es aber nicht jedem gegeben eigene Grafiken zu erstellen. Für all jene bieten Plattformen, wie z.B. IconFinder oder Free Icons Web eine große Auswahl.

Abschließend wäre es natürlich schon von Interesse zu wissen, welche Browser denn nun zuverlässig CSS 3 Selektoren darstellen können. Da ich nicht alle Browser zur Verfügung habe, muss ich mich auf die Ergebnisse Anderer verlassen. When can I use… gibt eine Kompatibilität für den IE ab Version 9 an, Firefox ab 3.6, Safari ab 3.2, Chrome ab 10.0 und Opera ab 10.6. Nebenbei sind auch einige Mobile-Browser aufgeführt. Überraschenderweise kann sogar der Netscape 7.02 aus dem Jahr 2003, den ich noch als Altertümchen installiert habe, einwandfrei die Symbole darstellen. Da haben die nicht mehr erfassbaren Netscape-User mal wieder Glück gehabt. 🙂

Kommentarfunktion ist deaktiviert.