Dieser Artikel beschreibt, wie man mithilfe von CSS Verweise mit einer Grafik kennzeichnet. Er richtet sich vordergründig an Neulinge.
Die Code-Boxen dieses Dokuments sind mit border-image gestaltet; Sie können dieses Dokument verwenden, um zu überprüfen, ob Ihr Browser dieses CSS3-Feature unterstützt. Derzeit (März 2010) tut dies nur Opera ab Version 10.50. Dazu müssen die Code-Boxen so aussehen, wie nebenstehende Grafik.
Häufig werden Verweise durch Grafiken als interne oder externe Links gekennzeichnet.
Dabei möchte man möglicherweise, dass sich auch die Hintergrundgrafik ändert, jenachdem ob es sich um einen besuchten oder unbesuchten Link handelt oder ob das Element gerade im Fokus steht. Es wäre klug, dafür nur eine Hintergrundgrafik zu verwenden und diese bei Bedarf zu verschieben, weil sich dadurch die Gesamtladezeit der Internetseite verringert und auch kein Nachladen von Grafiken notwendig ist. Nachfolgende Links veranschaulichen die Funktionsweise:
interner Link externer Link E-Mail Link verschlüsselt01 a
02 { padding-right: 20px;
03 text-decoration: none;
04 border-bottom: 1px solid #0000ee;
05 color: #0000ee;
06 background-image: url(images/intern.gif);
07 background-repeat: no-repeat;
08 background-position: right 0px;
09 }
10 a:visited
11 { border-bottom: 1px solid #800080;
12 color: #800080;
13 background-position: right -19px;
14 }
15 a:active, a:focus, a:hover
16 { border-bottom: 1px solid #edb713;
17 color: #edb713;
18 background-position: right -38px;
19 }
20 a.extern
21 { background-image: url(images/extern.gif);
22 }
In den Zeilen 1 - 9 werden Vereinbarungen getroffen, die für alle Linkelelemente gültig sein sollen.
Zunächst machen wir uns zunutze, dass die Links als Inline-Elemente immer genau die Größe ihres eigenen Platzbedarfs haben. Mittels padding-right verschieben wir den rechten Rand des Links soweit, dass unsere Grafik hinter den Linktext passt.
Die Links sollen einschließlich der Grafik unterstrichen sein. Da die Grafik in unserem Fall aber nur eine Hintergrundgrafik ist, greifen wir zu einem Trick, indem wir die Unterstreichung (text-decoration) entfernen und dem unteren Rahmen die entprechenden Eigenschaften zuweisen, in unserem Fall also eine 1px starke durchgehende blaue Linie.
Die Farbzuweisung in Zeile 5 kann man sich eigentlich sparen, denn es handelt sich um dieselbe Farbe, die für unbenutzte Links in den Default-stylesheets der Browser verwendet wird. Aber da keiner weiß, ob es nicht doch den einen oder anderen Nischenbrowser gibt, bei dem das nicht so ist und die Default-Stylesheets auch nicht in Beton gegossen sind, steht diese Farbzuweisung, damit Text und Grafik auch sicher dieselbe Farbe haben.
In diesem Beispiel wird davon ausgegangen, dass die Links zunächst einmal alle interne Links sind (url(images/intern.gif)), der Hintergrund soll sich nicht wiederholen und er wird, da das blaue Symbol das obere ist, an die rechte obere Ecke positioniert.
In den Zeilen 10 - 19 werden jetzt für die besuchten (visited) bzw. für die Links, über denen sich der Mauszeiger befindet (hover), die mit dem Tabulator angesprungen wurden (focus) oder die gerade angeklickt werden (active) die Farbe und die Position der Hintergrundgrafik geändert.
Schließlich bekommen noch die externen Links ihre eigene Hintergrundgrafik. Wenn man diesen Code so verwenden möchte, muss man darauf achten, dass der Aufbau der Hintergrundgrafiken, sowohl von den Abmessungen als auch der Reihenfolge der icons her, identisch ist.
Die Verwendung von Attribut abhängigen Selektoren erlaubt es, auf die Klassen "extern" oder "mail" zu verzichten. Wenn man unterstellt, dass das href-Attribut für externe Links mit http:// bzw. für einen E-Mail-Link mit mailto: beginnt, lässt sich das CSS-Stylesheet wie folgt verändern.
20 a[href^="http://"]
21 { background-image: url(images/extern.gif);
22 }
23 a[href$=".pdf"]
24 { background-image: url(images/pdf.gif);
25 }
In Zeile 20 werden jetzt alle diejenigen Links selektiert, deren href-Attribut mit http:// beginnt und in Zeile 23 alle die, deren Verweisziel (hypertext reference) mit .pdf endet.
Hierbei muss jedoch darauf geachtet werden, dass einige ältere Browser, insbesondere die Internetexplorer < 7, dies nicht interpretieren können.
Die Verwendung einer einzigen Hintergrundgrafik für alle möglichen Links erlaubt es, die Ladezeit der Internetseite weiter zu verringern. Allerdings wird dadurch das CSS-Stylesheet etwas umfangreicher. Zunächst wieder eine Veranschaulichung:
interner Link externer Link E-Mail Link verschlüsselt01 a
02 { padding-right: 20px;
03 text-decoration: none;
04 border-bottom: 1px solid #0000ee;
05 color: #0000ee;
06 background-image: url(images/intern.gif);
07 background-repeat: no-repeat;
08 background-position: right 0px;
09 }
10 a:visited
11 { border-bottom: 1px solid #800080;
12 color: #800080;
13 background-position: right -19px;
14 }
15 a:active, a:focus, a:hover
16 { border-bottom: 1px solid #edb713;
17 color: #edb713;
18 background-position: right -38px;
19 }
20 a[href^="http://"]
21 { background-position: right -57px;
22 }
23 a[href^="http://"]:visited
24 { background-position: right -76px;
25 }
26 a[href^="http://"]:active, a[href^="http://"]:focus, a[href^="http://"]:hover
27 { background-position: right -95px;
28 }
Wie man sieht, benötigt man jetzt für jeden Linktyp eine eigene Positionsangabe für das Hintergrundbild. Dies wäre unter Verwendung von Klassen, d.h. unter Verzicht auf CSS3-Selektoren, auch für ältere Browser umsetzbar.
Oft verwendet man auch Grafiken als Links. Hier wäre dann die Kennzeichnung wie bei den Textlinks wohl eher unerwünscht. Beispiel:
Da es nicht möglich ist, "rückwärts" zu selektieren, also in unserem Fall alle die Linkelemente anzusprechen, denen ein Bildelement folgt, kommt man um die Verwendung einer Klasse "link-grafisch" nicht umhin.
29 a.link-grafisch
30 {
31 padding: 0;
32 background: none;
33 border: none;
34 }
In Zeile 33 wird lediglich der Rahmen des Linkelementes, der als Unterstreichung missbraucht wird, gelöscht. Der angezeigte Rahmen gehört zur Grafik. Dies kann man auch schön im ersten Beispiel sehen.
Bekanntermaßen stellen Browser bereits besuchte Verweise anders dar als unbesuchte. Mit der CSS-Pseudoklasse :visited ist dem Webseitenersteller ein Werkzeug an die Hand gegeben, diese Darstellung sehr umfangreich zu beeinflussen - und auch herauszufinden, ob eine bestimmte Seite bereits besucht wurde.
Die Browserhersteller haben darauf reagiert, indem sie für die Pseudoklasse :visited nur noch eine sehr eingeschränkte Liste von CSS-Eigenschaften zulassen. Es ist nur noch möglich, bestimmte Farben festzulegen. Alle anderen CSS-Angaben werden von den Links selbst oder von den Deklarationen der unbesuchten Links übernommen. Dies hat zur Folge, dass in diesem Artikel das Hintergrundbild für bereits besuchte Verweise nicht violett wie der Text dargestellt wird, falls in Ihrem Browser bereits die Sicherheitslücke "CSS-History-Hack" geschlossen ist.
Obgleich diese Herangehensweise (unter Verzicht auf CSS3-Selektoren, d.h. wie im Kapitel 2 umgesetzt) für eine Vielzahl auch veralteter Browser funktioniert, sei darauf hingewiesen, dass man für jede Schriftgröße eine eigene Hintergrundgrafik benötigt.