CSS: neue Methode um Text zu verbergen

10 Kommentare

Seit vielen Jahren nutzen Webworker diverse Methoden um per CSS Text oder Überschriften zu verbergen, zum Beispiel bei grafischen Überschriften oder vor allem, wie hier auf perun.net, auf das Logo zu verlinken, aber den eigentlichen Text der zum Logo gehört zu Seite zu schieben.

Eine sehr bekannte und dabei auch zugängliche Methode ist es mit negativen Einrückungen zu arbeiten:

.verbergen {text-indent: -9999px;}

Diese Methode hat aber den Nachteil, dass der Browser eine knapp 10.000 Pixel große Box erstellen muss, daher hat Zeldman eine neue Methode vorgestellt, die von Scott Kellum stammt:

.verbergen {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

Via YAML4

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

Über Vladimir

Vladimir Simović arbeitet seit 2000 mit HTML & CSS und seit Januar 2004 mit WordPress. Im Laufe der Jahre hat er diverse Fachbücher und Fachartikel publiziert.

Schlagwörter: ,

10 Kommentare

  1. Genau dafür ist doch eigentlich das alt-Attribut gedacht, welches von Suchmaschinen gelesen wird und vom Browser angezeigt wird, wenn das Bild nicht geladen werden kann.

    1. Der Vergleich hinkt ein bisschen. In deinem Fall ist das Bild der Inhalt. Bei der oberen Methode ist der Text (z. B. Slogan der Firma) der Inhalt und das Logo, die sichtbare Zierde.

  3. Klappt super! Ist es denn so ein Nachteil, durch den Browser eine Große Box herstellen zu lassen (alte Methode)? Funktioniert die neue Methode auf Mobile Devices?

  4. Und display:none reicht nicht, weil…?

    Übrigens kann man Logos auch verlinken, ohne irgendwas zu verstecken, oder missverstehe ich da was?

  7. […] CSS: neue Methode um Text zu verbergen | WordPress & Webwork – Von Vladimir auf WordPress & Webwork. […]

  8. Für Unzulänglichkeiten minderwertiger Hardware sollte nicht der Webentwickler haften müssen.

    Ich glaub bei deinen Aussagen sollte man eher von einem miderwertigen, unfähigen Webentwickler sprechen, anstatt von minderwertiger Hardware…

    1. ein display: none hat nichts mit text-indent zu tun und ist natürlich auch keine Alternative. display: none macht genau das was es soll. Es zeigt Elemente nicht an, das gilt auch für Screenreader. Ein negatives text-indent verschiebt den Text nur in einen nicht sichtbaren Bereich. Z.B. benutzt man es um grafische Überschriften weiterhin als header aus zugegeben, ohne ein img zu verwenden. Das ist einerseits Barrierefrei, erlaubt die Benutzung von Sprites und hat keine visuellen Nachteile.

    2. Wenn man sich schon Webentwickler nennt, dann sollte man auch dafür sorgen, dass eine möglichst breite Hardware Plattfom abgedeckt wird. Auch wenn es komisch klingt und immer wieder von einigen so genannten Webentwicklern vergessen wird: Nicht jeder Besucher kommt mit einem Mehrkern Prozessor und einem Browser der neuesten Generation!

Kommentare sind geschlossen.