Sollte text-indent: -9999px; ersetzt werden?
Von: Raimund, Jonas Dieser Beitrag erörtert die Methoden, um Text aus dem sichtbaren Bereich zu verschieben.
Ich behaupte einfach mal, dass wohl jeder Webdesigner schon Text mit der CSS-Eigenschaft text-indent: -9999px; versteckt hat. Die aus heutiger Sicht schon fast antike Technik entstammt noch Zeiten, in denen wir ausgefallene Schriftarten mithilfe von Grafiken einbetten mussten. Da es Webfonts noch nicht gab, wurden Schmuckschriften in Bildern gespeichert. Anschließend wurde einem Element die Grafik als Hintergrundbild zugewiesen; der für die Suchmaschinen enthaltene „echte“ Text wurde versteckt. Mithilfe von text-indent: -9999px; wurde er um 9999 Pixel aus dem sichtbaren Bereich heraus verschoben.
Die Nachteile von -9999px
Heute müssen Texte nur noch selten versteckt werden, da durch die Technologie der Webfonts nahezu jede Schriftart verwendet werden kann. Auch Icon-Fonts tragen zu dieser Entwicklung bei. Doch text-indent: -9999px; ist nicht nur oft überflüssig geworden, die Technik hat auch tatsächliche Nachteile.
- Sehr lange Texte lassen sich nicht komplett verstecken
- Die Performance der Website wird massiv beeinträchtigt, da der Browser eine 9999 Pixel große Box rendern muss.
Die neue Technik
Nun bin ich vor ein paar Tagen über einen Artikel von L. Jeffrey Zeldman gestolpert, der mich zu diesem Beitrag inspiriert hat. In diesem Artikel wird eine bessere Lösung zum Verstecken von Texten beschrieben, die ich hier vorstellen und zur Diskussion stellen möchte. Mithilfe folgender CSS-Klasse wird das Zielobjekt angesprochen und der Text ausgeblendet.
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}Alternative Methode
In der HTML5Boilerplate wird noch eine zweite Variante vorgestellt.
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}Links / Quellen
Geschrieben von:
Raimund Büchner
Im IE sieht man mit der neuen Technik etwas vom Text :/
IE 9 getestet, kein Modernizr
Warum den zu verbergenden text nicht von der Ersatzgrafik selbst in einen unsichtbaren Bereich schieben lassen?
[div style=“height: 50px; overflow: hidden“]
[img height=“50″ style=“display: block“ … ]
Unsichtbarer Text
[/div]
Andere Möglichkeit: line-height: 200px;
Ich finde diese Image Replacement Techniken schon total dämlich, seitdem ich vor 6 Jahren mit der ganzen Sache angefangen habe. HTML liefert hierfür etwas, was sich weitaus besser eignen. Was? Genau, den img-Tag. Hiermit kann man das Bild problemlos einbinden und als alt-Attribut einfach den entsprechenden Text angeben. Das ist valide, semantisch korrekt und außerdem minimaler Aufwand.
Wozu man dazu jetzt irgendwelche CSS-Tricks benötigt, konnte mir in 6 Jahren nicht ein einziger erklären. Das einzige Argument war immer wieder »Aber es ist Design, das muss mit CSS gemacht werden«…
Ja genau. Exakt das ist das Argument. Layout-Grafiken haben im HTML-Code überhaupt nichts verloren. Das wäre ganz ganz schlechter Stil.
Sehe ich genauso wie Jonas. Wenn ich beispielsweise in Kontaktblöcken Icons statt Tel:, Fax: usw verwenden will mach ich das mit CSS und einer Methode, den „Alternativtext“ auszublenden. Da in jedem Kontaktblock massenhaft img-Tags zu verwenden müllt das Markup nur unnötig zu
Ich gebe dir recht. Ich finde Text verstecken auch mehr als unelegant. Es ist ein wirklich schmaler grat. Ich finde einerseits auch, dass Text über CSS auszublenden falsch ist und ich bin mir zu 100% sicher, dass Suchmaschinen so schlau sind und auf solche Maßnahmen reagieren können und solche CSS-Tricks eher kontraproduktiv sind. Aus diesem Grund wäre ein img-Tag mit alt-Attribut sicher besser.
Allerdings sehe ich es auch so, dass Layout-Grafiken nicht als img eingebunden werden sollten, sondern nur Grafiken, die zum Content gehören und für den Nutzer relevant sind.
Generell sollten in meinen Augen nur noch Webfonts verwendet werden. Doch was ist wenn der Designer eine Font nutzt, die nur als kostenpflichtige Webfont bereit steht und der Kunde nicht bereit ist dafür zu zahlen?
Jetzt muss ich mich also entscheiden und wähle auch lieber einen CSS-Trick. Der hier vorgestellte gefällt mir ganz gut und ich werde ihn mal testen. Vielen Dank dafür :)
Richtig Chris, versteckter Text verstößt gegen die Webmaster Guidelines von Google und wird (bzw. kann) sich definitiv negativ auf das Ranking auswirken. Ein „sauberer“ Code ist das A und O. Dazu gehört für mich auch die strikte Trennung von Layout-Grafiken, die, wie Jonas es bereits geschrieben hat, nichts in dem HTML-Code verloren haben.
Also bei mir klappt das überhaupt nicht… Bei mir soll damit ein Text versteckt werden, der aus Usabilitygründen hinter einem Icon aus einer Iconfont steht. Aber der Text wird immernoch angezeigt.
Anmerkung noch: Das Icon wird per :before angezeigt. Ich bekomm den Text aber einfach nicht ausgeblendet, ohne dass das Icon auch verschwindet :(
Wenn das Icon ein Font icon ist, dann musst du beim :before es so schreiben: :before{text-indent:0px; white-space:normal;}
Nicht getestet, sollte aber so gehen, das du die Werte halt nochmal überschreibst, Font icons ist ja auch nur Text
Danke, aber irgendwie klappt bei mir der Tipp von Jonas auch ohne was drumherum überhaupt nicht. Ich weiß nicht, wodran das liegt. Weder in Chrome, noch in Firefox.
Ich nutze diese Methode:
.ir {
font: 0/0 a;
text-shadow: none;
color: transparent;
}
http://nicolasgallagher.com/another-css-image-replacement-technique/
Ist aber ungünstig sobald man in dem Kontext in dem man die Schriftgröße auf 0 gesetzt hat noch mit em als Einheit für Größenangaben arbeiten will (was man generell tun sollte :) )
Meine favorisierte Technik, die ich in irgendeinem vergangenem Post in der Blogosphäre aufgeschnappt hab:
.ir {
color: transparent;
font: 0/0 a;
text-shadow: none;
}
diese technik bei texten zu verwenden ist natürlich nciht das gelbe vom ei.. bei einem logo macht es allerdings sinn, wenn es als h1 mit text hinterlegt ist. wird auch erwartet. vom screanreader und von suchmaschinen.
seo technisch ist das schon in ordnung, es macht auch nichts kaputt. es ist einfach nicht „elegant“. height 0px; ist da sicher auch keine bessere alternative.
die vorgestellte lösung, hm. ganz nett, aber ob sie wirklich besser ist sei mal dahin gestellt.
Heyho,.. ich versuch das immer zu vermeiden.. In der Regel lässt sich da, wo ein img rein muss doch auch das img direkt setzen ohne den Text.
Ich glaube man macht SEO-Technisch mehr kaputt mit „Texte ausblenden“ als Texte weglassen.. Zumal ich da ja „alt-Tag“ und „title-tag“ habe.
oder was meint ihr?
Geht auch wunderbar so:
http://bustoutsolutions.com/blog/2009/10/08/better-alternative-to-text-indent-9999px
Nutze ich auch häufiger, wenn es passt.
Das sieht doch mal nach einer guten Methode aus, da hätte man eigentlich schon lange mal drauf kommen können :) Bisher bin ich bei text-indent häufiger auch mal auf Probleme mit dem IE7 gestoßen, man müsste also noch testen ob der das verträgt. Aber das wird beim nächsten mal gleich ausprobiert!