perun.net – WordPress & Webwork



CSS: neue Methode um Text zu verbergen

Von am 04. 03. 2012 um 15:55 – Aktualisiert am 05. 03. 2012 um 13:14

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

Diesen Artikel weiterempfehlen:

Premium WordPress Themes

Verwandte Artikel:

Kategorien:
HTML & CSS
Tags:
,  
Beitrag:
Druckvorschau
Kommentare:
Kommentare verfolgen oder Kommentar abgeben

 — 


10 Kommentare

  1. 1. – tgx23

    Kommentar vom 04.03.2012 um 16:18

    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.

  2. 2.Vladimir

    Kommentar vom 04.03.2012 um 16:22

    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. 3.Webstandard-Blog

    Kommentar vom 05.03.2012 um 13:13

    Kleine Korrektur dieser neue Ansatz stammt von Scott Kellum, Jefferey hat sie "nur" publik gemacht.

  4. 4.Vladimir

    Kommentar vom 05.03.2012 um 13:15

    Danke für den Hinwies.

  5. 5.ConnyLo

    Kommentar vom 05.03.2012 um 19:46

    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?

  6. 6.tux.

    Kommentar vom 06.03.2012 um 13:16

    Und display:none reicht nicht, weil…?

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

  7. 7.nico

    Kommentar vom 06.03.2012 um 17:20

    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/

  8. 8.tux.

    Kommentar vom 06.03.2012 um 17:42

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

  9. 9.metafakten // metalinks am 9. März 2012

    Pingback vom 09.03.2012 um 23:02

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

  10. 10. – Patric

    Kommentar vom 12.03.2012 um 10:30

    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!

Hinweis:
300+ Professionelle WordPress-Themes
Premium WordPress-Themes, 38 davon mit deutschem Support

Tut mir Leid, aber die Kommentar-Funktion ist momentan deaktiviert.



Weblog der perun.net webwork gmbh mit Artikeln zum Thema WordPress, Webwork, und Internet.