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 Dienstleistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.
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.
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.
Kleine Korrektur dieser neue Ansatz stammt von Scott Kellum, Jefferey hat sie “nur” publik gemacht.
Danke für den Hinwies.
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?
Und display:none reicht nicht, weil…?
Übrigens kann man Logos auch verlinken, ohne irgendwas zu verstecken, oder missverstehe ich da was?
Die alt hergebrachte Methode zieht wohl performance Probleme auf dem Ipad nach sich.
Hier noch eine ähnliche Methode aus der html5 boilerplate:
http://nicolasgallagher.com/another-css-image-replacement-technique/
Für Unzulänglichkeiten minderwertiger Hardware sollte nicht der Webentwickler haften müssen.
[…] CSS: neue Methode um Text zu verbergen | WordPress & Webwork – Von Vladimir auf WordPress & Webwork. […]
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!