Image-Replacement: Ersatz für -9999px-Hack

CSS-Image-Replacement

Alle Grafiken, die lediglich der Gestaltung dienen sollten nur über das CSS eingebunden werden. Das fördert eine saubere Trennung zwischen Inhalt und Gestaltung. Oft hat man allerdings Grafik-Elemente, die einen Text komplett ersetzen sollen. Ein Beispiel wären z.B. Buttons oder Navigations-Elemente.

Den Text aus dem HTML zu entfernen ist aus Sicht der Barrierefreiheit und für Suchmaschinen nicht optimal. Aus diesem Grund haben sich einige CSS-Image-Replacement-Methoden etabliert. Eine davon war über die Eigenschaft text-indent den Text aus dem Sichtbereich zu schieben. Beispiel:

.image-replacement {
  background: url('replacement.png') no-repeat;
  text-indent: -9999px;
}

Damit erklärt sich auch der Name “-9999px-Hack”. Diese Methode hat allerdings einen Nachteil: Der Browser erzeugt intern ein Element, dass über 10.000 Pixel breit ist. Das wirkt sich gerade bei Animationen negativ auf die Performance aus, was gerade bei Mobilgeräten zu einem Problem werden kann.

Eine bessere Möglichkeit wäre es den Text einfach nach rechts zu verschieben. Dazu setzt man die Einrückung einfach auf 100% der Element-Breite und verhindert den Textumbruch.

.image-replacement {
  background: url('replacement.png') no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

Nachteil: Der Text darf nur aus einer Zeile bestehen, die darf allerdings beliebig lang sein. Bei den meisten Situationen ist das allerdings kein Problem.

[ via zeldman.com ]