CSS-Bildersetzungstechniken

Bei den vorgestellten Bildersetzungstechniken gehen wir immer von einer H1-Überschrift aus, die durch ein Bild ersetzt werden soll. Diese Techniken lassen sich natürlich auf andere html-Tags anwenden. 

FIR-Technik (Fahrner Image Replacement)

HTML-Markup-Code:

<h1 id="header"><span>CSS-Webdesign macht Spaß</span></h1>

CSS-Code:

#header {
    background: url(bluesky.gif) top left no-repeat;
    width: 500px;
    height: 25px;
}

#header span {
    display: none;
}

Über das span-Tag werden alle Texte per CSS-Eigenschaft "display: none" ausgeblendet. Im Grunde wurde diese Technik entwickelt, um sehbehinderten Menschen die Möglichkeit zu geben den Text einer Grafik per Screenreader zu lesen. Auch Suchmaschinen wie Google sollten dadurch den semantisch korrekten oder logischen Aufbau der Webseite besser erfassen können.

Die Technik hat einen gravierenden Nachteil: Wer Grafiken in seinem Browser abschaltet, aber CSS eingeschaltet lässt, sieht rein gar nichts. 

Leathy und Langridge-Technik

Diese Methode verzichtet auf das innenliegende span-Tag und ist ebenfalls für Bildschirmlesegeräte zugänglich, es löst aber auch das Problem mit Bilder aus, CSS an nicht: 

HTML-Markup-Code:

<h1 id="header">CSS-Webdesign macht Spaß</h1>

CSS-Code:

#header {
    padding-top: 25px;
    overflow: hidden;
    background: url(bluesky.gif) top left no-repeat;
    width: 500px;
    height: 0 !important;
    height /**/: 25px;
}

Rundle-Technik

Mit einem großen negativen text-indent-Wert wird der Text per CSS aus dem sichtbaren Bereich des Browserfensters hinausgeschoben. Das CSS bleibt kurz, semantisch ist der Markup-Code auch korrekt. Nur bei älteren Browsern gibt es Probleme, z.B. beim Internet Explorer 5.0. Dieser schiebt auch das Bild aus dem Sichtfeld.

HTML-Markup-Code:

<h1 id="header">CSS-Webdesign macht Spaß</h1>

CSS-Code:

#header {
    text-indent: -7000px;
    background: url(bluesky.gif) top left no-repeat;
    width: 500px;
    height: 25px;
}

alternative Techniken

Es gibt auch alternative Techniken, die dynamischen Text mittels JavaScript generieren. Dazu muss der Font auf dem Webserver liegen.

Weiterführende Linksauf der Webseite von Webdesign Weisshart, die auch Vor- und Nachteile dieser Ersetzungstechniken erläutern:
http://webdesign.weisshart.de/dynatext.php

Vorsicht bei Suchmaschinen

Diskussionen zeigen immer wieder, dass es zum einen bei den Bildersetzungstechniken Probleme mit den Suchmaschinen geben kann, zum anderen Probleme bei Sreenreadern für Sehbehinderte. Es ist klar, dass  verborgene Inhalte von Spammern gerne genutzt werden, um Texte in den Suchindex zu bringen, die für den normalen Besucher, der mit dem Internet Explorer oder dem Firefox unterwegs ist unsichtbar bleiben sollen.

Da es mit Bildersetzungstechniken Probleme geben kann wird auch vorgeschlagen, das CSS in eine externe Datei auszulagern und das entsprechende Verzeichnis per robots.txt vor den Suchmaschinen zu schützen

Einige Diskussionen und Warnungen gibt es hier:

http://www.webdesign-in.de/mts/google-bestraft-display-none-visibility-hidden/ 

http://blog.suchmaschinen-optimierungen.info/google-ignoriert-unsichtbare-elemente 

Daher mein Tipp: Die CSS-Bildersetzungstechniken immer mit Vorsicht einsetzen, Webseiten sollten für die Besucher das meiste herausholen. Im zweifelsfalle doch nochmal das Design überdenken. Wenn man sich für eine weit verbreitete Schriftart festlegt, die nicht auf allen Systemen zur verfügung steht immer eine grundlegende Schrift der CSS-Eigenschaft font-family hinzufügen. So lassen sich manche Überschriften - falls es ins Layout passt - auch gerne mal mit Georgia, Trebuchet MS oder Comic Sans MS angeben. Grundsätzlich kann ich die CSS-Ersetzungstechniken jedoch nicht empfehlen. Warten wir ab, was es in Zukunft an moderneren Techniken geben wird, die weniger Nachteile haben.