CSS: Links mit Datei-Icon ergänzen

Veröffentlicht am von

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) left center 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) left center 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) left center 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) left center no-repeat;
padding-left:20px;
line-height:16px;
}
/* externe: Links */
a[href^=“http://“] {
background: url(../images/icon-extern.png) right center 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/

Für IE6 gibt es die Möglichkeit von jQuery:
Rebecca Murphy

Related Posts:

7 Gedanken zu „CSS: Links mit Datei-Icon ergänzen“

  1. Hi, könntest du mal eine Demo dazu machen? Würde mich mal interessieren wie das in „echt“ aussieht.
    liebe Grüße von deinem nun neuem Leser Paloran

  5. Offiziell sollte man für die background-Position „left center“ angeben und nicht „center left“, auch wenn die Browser das trotzdem verstehen. Immer erst X, dann Y. Ansonsten vertauscht man das später auch, wenn man px- oder %-Angaben macht. 🙂

Kommentare sind geschlossen.