kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Sollte text-indent: -9999px; ersetzt werden?

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 mit Hilfe 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. Mit Hilfe von text-indent: -9999px; wurde er um 9999 Pixel aus dem sichtbaren Bereich heraus verschoben.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

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. Mit Hilfe 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 einer 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

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

19 Kommentare

  1. Ria Elliger

    Verfasst am 13. November 2012 um 10:23 Uhr.

    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!

  2. Georg

    Verfasst am 13. November 2012 um 10:26 Uhr.

    Geht auch wunderbar so:
    http://bustoutsolutions.com/blog/2009/10/08/better-alternative-to-text-indent-9999px

    • Ria Elliger

      Verfasst am 14. November 2012 um 10:54 Uhr.

      Nutze ich auch häufiger, wenn es passt.

  3. René Grosche

    Verfasst am 13. November 2012 um 10:35 Uhr.

    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?

  4. Chris

    Verfasst am 13. November 2012 um 12:03 Uhr.

    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.

  5. Martin

    Verfasst am 13. November 2012 um 12:18 Uhr.

    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;
    }

  6. Flo

    Verfasst am 13. November 2012 um 12:27 Uhr.

    Ich nutze diese Methode:

    .ir {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    }

    http://nicolasgallagher.com/another-css-image-replacement-technique/

    • Ria Elliger

      Verfasst am 14. November 2012 um 10:53 Uhr.

      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 :) )

  7. waldi

    Verfasst am 13. November 2012 um 15:16 Uhr.

    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.

    • waldi

      Verfasst am 13. November 2012 um 15:51 Uhr.

      Anmerkung noch: Das Icon wird per :before angezeigt. Ich bekomm den Text aber einfach nicht ausgeblendet, ohne dass das Icon auch verschwindet :(

      • Moev

        Verfasst am 16. November 2012 um 14:34 Uhr.

        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

      • waldi

        Verfasst am 16. November 2012 um 15:37 Uhr.

        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.

  8. Wishu Kaiser

    Verfasst am 13. November 2012 um 18:56 Uhr.

    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«…

    • Jonas Hellwig

      Verfasst am 13. November 2012 um 20:56 Uhr.

      Ja genau. Exakt das ist das Argument. Layout-Grafiken haben im HTML-Code überhaupt nichts verloren. Das wäre ganz ganz schlechter Stil.

    • Ria Elliger

      Verfasst am 14. November 2012 um 10:51 Uhr.

      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

    • Chris

      Verfasst am 19. November 2012 um 10:24 Uhr.

      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 :)

      • Andre Heuer

        Verfasst am 29. November 2012 um 15:45 Uhr.

        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.

  9. André Olejko

    Verfasst am 7. Juli 2013 um 0:33 Uhr.

    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;

  10. Moe

    Verfasst am 7. Mai 2015 um 13:04 Uhr.

    Im IE sieht man mit der neuen Technik etwas vom Text :/
    IE 9 getestet, kein Modernizr

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.