Oft ist es nicht erwünscht, dass der normale reine Text in einem HTML-Dokument steht. Es sind leider nur eine handvoll Schriften nutzbar, die mehr oder weniger gleich auf allen Systemen aussehen. Insbesondere betroffen sind Überschriften, die gestylt einfach schöner sind und sich besser ins Layout der Webite integrieren. Man könnte natürlich einfach ein Bild benutzen und statt dem Text einsetzen. Das ist allerdings semantisch nicht korrekt und geht auch gegen das Grundprinzip Layout und Inhalte einer Webseite zu trennen. Vorteile und Nachteile der CSS-Bildersetzungstechniken werden hier aufgelistet:
Vorteile und Nachteile von Bildersetzungstechniken in CSS
Vorteile
- grafische Gestaltung möglich (schöner?)
- besser ins Layout integrierbar
- andere Fonts ausser Arial, Verdana, Helvetica, Times, etc. möglich
- hebt sich von anderen Webseiten ab (individuelles Aussehen)
Nachteile
- aufwändiger in Erstellung und Wartung
- Skalierbarkeit geht verloren
- Text lässt sich im Browser nicht markieren
- nicht jede Technik ist maschinenlesbar (Screenreader/Bildschirmlesegeräte)
- eventuell Probleme mit Suchmaschinen (verborgener Text)
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.
Bookmarks:
Delicious Facebook Google Yahoo Mr. Wong Linkarena Digg