Links mit Dateityp-Icons via CSS

Es gibt ja verschiedene Möglichkeiten, Links über Javascript kleine Icons hinzuzufügen, die dem Benutzer anzeigen, auf was für einen Dateityp verlinkt wird oder ob es sich um einen internen oder externen Verweis handelt.

Das kann man allerdings auch sehr einfach mit reinem CSS 2.1 realisieren. Wie immer bleibt das Fossil Internet Explorer 6 außen vor, aber das Problem kennt der gestresste Webentwickler ja bereits.

Update: Wie ich inzwischen auf die harte Tour feststellen mußte, beherrscht auch der IE7 kein display:inline-block; Dumm gelaufen.
Und wie?

Wir benutzen den Attribut-Selektor für das „a“-Tag mit eckigen Klammern. Will man beispielsweise alle externen Links mit einem entsprechenden Icon versehen, dann selektiert man dies im Stylesheet über a[href^=“http://“]

a[href^="http://"] {
  display:inline-block;
  background: url(../images/extern.png) center right no-repeat;
  padding-right:10px;
}

Der Operator „^“ bedeutet „beginnt mit“. Deswegen fügt a[href^=“http://“] jedem externen Link der mit „http://“ beginnt, das gewählte Icon hinzu.

Der Operator $

Wie man sich vorstellen kann: wenn es „beginnt mit“ gibt, dann existiert auch ein Operator für „endet mit“. Der wird durch das Dollarzeichen „$“ repräsentiert und man kann ihn man prima mit Dateiendungen kombinieren, zum Beispiel .doc, .pdf, .xls, .zip, .rar, oder…:

Beispiel: a[href$=‘.zip‘] platziert automatisch ein Icon neben Links auf Dateien mit der Endung .zip.

a[href$='.zip'], a[href$='.rar'], a[href$='.gzip'] {
  background: url(../images/zip.png) center left no-repeat;
  display:inline-block;
  padding-left:10px;
  line-height:16px;
}

Noch mehr Beispiele

Auf diese Art und Weise kann man, wie bereits geschrieben, beliebige Links und Dateiverweise mit Icons versehen. Hier noch mehr Beispiele:

/* PDF-Links */
a[href$='.pdf'] {
  background: url(../images/pdf.png) center left no-repeat;
  display:inline-block;
  padding-left:15px;
  line-height:16px;
}

/* Excel-Links */
a[href$='.xls'], a[href$='.csv'], a[href$='.xlw'], a[href$='.xlt'] {
  background: url(../images/excel.png) center left no-repeat;
  display:inline-block;
  padding-left:15px;
  line-height:16px;
}

/* Word-Links */
a[href$='.doc'], a[href$='.rtf'], a[href$='.txt'] {
  background: url(../images/word.png) center left no-repeat;
  display:inline-block;
  padding-left:15px;
  line-height:16px;
}

/* mailto: Links */
a[href^="mailto:"] {
  background: url(../images/mailto.png) center left no-repeat;
  display:inline-block;
  padding-left:15px;
  line-height:16px;
}

Und Internet Explorer 6?

Wie üblich funktioniert das im IE6 nicht, es gibt aber Crossbrowser-taugliche Möglichkeiten beispielsweise via jQuery. Interessierte finden dazu einen Artikel bei Rebecca Murphey.