CSS: Links mit Datei-Icon ergänzen
Um einem Link ein Icon hinzufügen gibt es verschiedene Möglichkeiten. JavaScript, Prefilter und CSS. Die CSS Möglichkeit möchte ich hier ein wenig näher Betrachten.
Vorab: IE6 unterstützt dies nicht.
Unter CSS2/CSS3 gibt es sogenannte Attribut-Selektoren. Attribut-Selektoren sind Teil der CSS2/CSS3 Spezifikation und extrem effektiv. Sie erlauben Dinge, die man bis jetzt nur mit Javascript machen konnte.
Die Attribut-Selektoren beziehen sich auf die Attribute von Elementen. Man kann diese Attribute (im Beispiel fett geschrieben) direkt ansprechen, auswerten und die Darstellung der dazugehörigen Elemente spezifisch definieren.
Beispiel: <a href=”” title=””> oder <img alt=”" src=”” alt=”” />
Folgende Operatoren zum Auswerten der Attribute gibt es. Als Beispiel nehmen wir hier den href Attribut einens Links. <a href=”foobar>www.camma.ch</a>
a[title]
Passt auf ein Element a mit dem Attribut title.
a[href="foobar"]
Passt auf ein Element a mit Attribut href und dem exakten Wert foobar.
a[href~="foobar"]
Passt auf ein Element a mit Attribut href, dessen durch Leerzeichen getrennte Liste von Werten foobar enthält. Würde auch auf den Attribut-Wert “foobar baz blah” zutreffen.
a[href|="foobar"]
Passt auf ein Element a mit Attribut href, dessen durch Trennstriche (-) getrennte Liste von Werten foobar enthält.
a[href^="foobar"]
Passt auf ein Element a mit Attribut href, dessen Wert mit foobar beginnt. Würde auch auf den Attribut-Wert foobarabo zutreffen.
a[href$="foobar"]
Passt auf ein Element a mit Attribut href, dessen Wert mit foobar endet. Würde auch auf den Attribut-Wert abofoobar zutreffen.
a[href*="foobar"]
Passt auf ein Element a mit Attribut href, dessen Wert foobar an beliebiger Stelle in der Zeichenkette enthält.
Beispiel für Datei-Icons
/* PDF-Links */
a[href$='.pdf'] {
background: url(../images/icon-pdf.gif) center left no-repeat;
padding-left:20px;
line-height:16px;
}
/* Excel-Links */
a[href$='.xls'], a[href$='.csv'], a[href$='.xlw'], a[href$='.xlt'] {
background: url(../images/icon-excel.gif) center left no-repeat;
padding-left:20px;
line-height:16px;
}
/* Word-Links */
a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'] {
background: url(../images/icon-word.gif) center left no-repeat;
padding-left:20px;
line-height:16px;
}
/* Zip-Links */
a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] {
background: url(../images/icon-zip.gif) center left no-repeat;
padding-left:20px;
line-height:16px;
}
Externe Links / mailto:
/* mailto: Links */
a[href^="mailto:"], a[href*="UnCryptMailto"] {
background: url(../images/icon-mailto.png) center left no-repeat;
padding-left:20px;
line-height:16px;
}
/* externe: Links */
a[href^="http://"] {
background: url(../images/icon-extern.png) center right no-repeat;
padding-right:15px;
}
Natürlich kann man auch externe Links oder mailto: Links kennzeichnen. Da ich die JavaScript Funktion UnCryptMailto nutze, habe ich auch diesen Teil integriert.
Quellen
http://www.w3.org/TR/css3-selectors/
http://www.intensivstation.ch/css/selectors/attribute-selectors/
Für IE6 gibt es die Möglichkeit von jQuery:
Rebecca Murphy
Popularity: 6% [?]
Twitter It!
