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.

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.

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

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 →