WordPress & Webwork

CSS: neue Methode um Text zu verbergen

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

10 Reaktion(en)

  1. tgx23

    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. Vladimir

      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.

  2. ConnyLo

    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?

  3. Pingback: metafakten // metalinks am 9. März 2012

  4. Patric

    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!

Die Kommentare in diesem Beitrag sind geschlossen.