Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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

  • Replacing the -9999px Hack – New Image Replacement
  • Alternative zu Text-Indent: -9999px
    • Geschrieben von Jonas

      thumb

      Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

      Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

      Feedback & Ergänzungen – 19 Kommentare

      1. Moe
        schrieb am 07.05.2015 um 13:04 Uhr:

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

        Antworten
      2. André Olejko
        schrieb am 07.07.2013 um 00: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;

        Antworten
      3. Wishu Kaiser
        schrieb am 13.11.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«…

        Antworten
        • Jonas Hellwig (Autor)
          schrieb am 13.11.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.

          Antworten
        • Ria Elliger
          schrieb am 14.11.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

          Antworten
        • Chris
          schrieb am 19.11.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 :)

          Antworten
          • Andre Heuer
            schrieb am 29.11.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.

      4. waldi
        schrieb am 13.11.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.

        Antworten
        • waldi
          schrieb am 13.11.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 :(

          Antworten
          • Moev
            schrieb am 16.11.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
            schrieb am 16.11.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.

      5. Flo
        schrieb am 13.11.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/

        Antworten
        • Ria Elliger
          schrieb am 14.11.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 :) )

          Antworten
      6. Martin
        schrieb am 13.11.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;
        }

        Antworten
      7. Chris
        schrieb am 13.11.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.

        Antworten
      8. René Grosche
        schrieb am 13.11.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?

        Antworten
      9. Georg
        schrieb am 13.11.2012 um 10:26 Uhr:
        • Ria Elliger
          schrieb am 14.11.2012 um 10:54 Uhr:

          Nutze ich auch häufiger, wenn es passt.

          Antworten
      10. Ria Elliger
        schrieb am 13.11.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!

        Antworten

      Schreibe einen Kommentar zu Martin Antworten abbrechen

      Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →