Text mit CSS ausblenden, Best Practice?

Lesezeit: 6 Minuten

Benutzer-Avatar
Todesschloss

Nehmen wir an, ich habe dieses Element zum Anzeigen des Website-Logos:

<div id="web-title">
  <a href="http://website.com" title="Website" rel="home">
    <span>Website Name</span>
  </a>
</div>

Das #web-title würde mit gestylt werden background:url(http://website.com/logohere.png)sondern wie man den Text richtig versteckt Website Name? Wie hier zu sehen: Hide text using css oder hier https://stackoverflow.com/a/2705328 , habe ich verschiedene Methoden gesehen, um den Text zu verbergen, wie zum Beispiel:

#web-title span { text-indent: -9999px; }

oder

#web-title span { font-size: -9999px; }

oder

#web-title span { position: absolute; top: -9999px; left: -9999px; }

Ich habe auch einige gesehen, die diese drei Methoden kombinieren. Aber welches ist eigentlich die beste Methode, um Text effektiv zu verbergen?

  • Wie wäre es mit Anzeige: keine?

    – F.Müller

    8. Oktober 2012 um 14:10 Uhr

  • Nicht konstruktiv: Nach derzeitigem Stand passt diese Frage nicht gut in unser Q&A-Format. Wir erwarten Antworten, die durch Fakten, Referenzen oder spezifisches Fachwissen gestützt werden, aber diese Frage wird wahrscheinlich zu Debatten, Argumenten, Umfragen oder ausführlichen Diskussionen führen.

    – Florent

    8. Oktober 2012 um 14:11 Uhr

  • Ist kein Klugscheißer, aber kannst du nicht einfach ein Image-Tag setzen? Ich bin nur ein praktischer Mensch, der keine hässlichen Ad-hoc-Lösungen mag. vielleicht bin ich falsch

    – Markus Segal

    8. Oktober 2012 um 14:11 Uhr

  • Hier ist eine Liste der meisten Bildersetzungstechniken, ihre Vor- und Nachteile: css-tricks.com/examples/ImageReplacement

    – cooperita

    8. Oktober 2012 um 14:36 ​​Uhr

  • aktuellere Zusammenfassung der Techniken: css-tricks.com/the-image-replacement-museum

    – ptim

    9. Februar 2017 um 0:05 Uhr

Benutzer-Avatar
coopersita

Tatsächlich kam kürzlich eine neue Technik heraus. Dieser Artikel beantwortet Ihre Fragen: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement

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

Es ist zugänglich und hat eine bessere Leistung als -99999px.

Aktualisieren: Wie @deathlock im Kommentarbereich erwähnt, ist der Autor des obigen Fixes (Scott Kellum), hat vorgeschlagen, a transparente Schrift: http://scottkellum.com/2013/10/25/the-new-kellum-method.html.

  • Das ist toll. Wie haben Sie das entdeckt?

    – Gefahr14

    18. April 2013 um 19:17 Uhr

  • @Danger14 Kann mich nicht erinnern, aber seit es auf Zeldmans Seite gepostet wurde, muss es eine Menge Leute in Blogs und auf Twitter kommentiert haben.

    – cooperita

    19. April 2013 um 21:39 Uhr

  • Eine andere Methode mit clip:rect(): developer.yahoo.com/blogs/ydn/…

    – thdoan

    29. August 2013 um 3:05 Uhr

  • Ich aktualisiere nur: Was ist mit der neuen Kellum-Methode? scottkellum.com/2013/10/25/the-new-kellum-method.html

    – Todesfall

    5. November 2013 um 6:40 Uhr

  • Andernfalls werden Ihre Tabellenzellen zerstört text-indent: 100%.

    – Daniel Kmak

    21. März 2015 um 11:04 Uhr

Sie können es einfach transparent machen

{
   width: 20px;
   height: 20px;
   overflow: hidden; 
   color:transparent;
}

  • +1 Dies funktioniert hervorragend, wenn Sie einen Link haben, der noch aktiv sein muss. Ich habe dies verwendet, um Zahlen auf einem alten Bild-Slider loszuwerden, und die Links funktionieren gut.

    – Dan Beaulieu

    9. Februar 2015 um 21:28 Uhr

  • Dies ist die Lösung, die für meine Bedürfnisse funktioniert hat. Ich habe eine Schaltfläche, die eine Grafik über die CSS-Hintergrundbildeigenschaft enthält, und auf Mobilgeräten wollte ich die Schaltfläche einklappen und den Text ausblenden.

    – Brad Johnson

    21. März 2015 um 2:56 Uhr

Kannst du nicht einfach verwenden display: none; so was

HTML

<div id="web-title">
   <a href="http://website.com" title="Website" rel="home">
       <span class="webname">Website Name</span>
   </a>
</div>

CSS

.webname {
   display: none;
}

Oder wie wäre es, wenn Sie mit der Sichtbarkeit spielen, wenn Sie den Platz reservieren möchten

.webname {
   visibility: hidden;
}

  • Display:none hat sehr negative Auswirkungen auf Benutzer von Screenreadern. Es ist ein großes Zugänglichkeits-No-No.

    – cooperita

    8. Oktober 2012 um 14:19 Uhr

  • @Mr.Alien: Ich glaube, das liegt daran, dass Screenreader, die CSS respektieren, die nicht angezeigten Elemente einfach überspringen. Sie möchten nicht, dass dies für Überschriften geschieht. Grundsätzlich möchten Sie den Text nur vor Nicht-Bildschirmlesern verbergen.

    – Millielch

    8. Oktober 2012 um 14:28 Uhr

  • aber was nützt es, einen text zu lesen, den man eigentlich verstecken will, und wenn man wirklich will, dass er vorgelesen wird, warum dann verstecken? und wo hat dieser user gesagt, dass er eine reader-kompatible lösung will?

    – Herr Alien

    8. Oktober 2012 um 14:30 Uhr


  • Er hat nicht gesagt, dass er Screenreader will, aber er hat gefragt, was die beste Vorgehensweise ist. Eine gute Zugänglichkeit ist der richtige Weg, Dinge zu tun. Stellen Sie sich vor, er wäre verheerend für Screenreader, wenn Sie dies mit Ihrem Logo und Ihren Menüpunkten tun würden.

    – cooperita

    8. Oktober 2012 um 14:46 Uhr

  • @Mr.Alien Das Logo würde den Text ersetzen, der den Namen Ihrer Site zeigt. Es gibt einen Grund, der normalerweise an erster Stelle auf einer Seite steht … Die meisten Leute möchten wissen, auf welcher Website sie sich befinden …

    – cooperita

    8. Oktober 2012 um 14:51 Uhr

die Art und Weise, wie die meisten Entwickler vorgehen, ist:

<div id="web-title">
   <a href="http://website.com" title="Website" rel="home">
       <span class="webname">Website Name</span>
   </a>
</div>

.webname {
   display: none;
}

Früher habe ich das auch gemacht, bis mir klar wurde, dass Sie Inhalte für Geräte verstecken. alias Screenreader und so.

Also vorbei:

#web-title span {text-indent: -9000em;}

Sie stellen sicher, dass der Text noch lesbar ist.

Fügen Sie Ihrer Spanne, die den Text enthält, die Klasse .hide-text hinzu

.hide-text{
display:none;
 }

oder machen Sie den Text transparent

.hide-text{
 color:rgba(0,0,0,0);
 }

Verwendung nach Ihrem Anwendungsfall.

  • Wie andere gesagt haben, display: none hat eine sehr schlechte Auswirkung auf den Bildschirmleser. stackoverflow.com/a/12783474/651170

    – Todesfall

    3. Juli 2016 um 14:09 Uhr

Benutzer-Avatar
Millielch

Wenn Sie bereit sind, dies in Ihrem Markup unterzubringen (wie Sie in Ihrer Frage mit dem Halten des Textes sind), würde ich mit der jQuery-Benutzeroberfläche gehen, mit der sie ging CSS-Helfer:

.ui-helper-hidden-accessible { 
    position: absolute !important; 
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px); 
}

Die Bildersetzungstechniken sind gut, wenn Sie es absolut ablehnen, zusätzliches Markup für den Text hinzuzufügen, der im Container für das Bild versteckt werden soll.

  • Wie andere gesagt haben, display: none hat eine sehr schlechte Auswirkung auf den Bildschirmleser. stackoverflow.com/a/12783474/651170

    – Todesfall

    3. Juli 2016 um 14:09 Uhr

Benutzer-Avatar
Neeraj

Was Google (Suchbot) benötigt, ist, dass derselbe Inhalt dem Bot bereitgestellt wird, wie er dem Benutzer bereitgestellt wird. Das Einrücken von Text (beliebiger Text) lässt den Bot glauben, dass es sich um Spam handelt oder Sie Benutzern und Bot unterschiedliche Inhalte bereitstellen.

Die beste Methode besteht darin, das Logo direkt als Bild in Ihrem Anker-Tag zu verwenden. Geben Sie Ihrem Bild ein ‘alt’. Dies ist perfekt für den Bot zum Lesen und hilft auch bei der Bildsuche.

Das kommt direkt aus dem Maul des Pferdes: http://www.youtube.com/watch?v=fBLvn_WkDJ4

1225850cookie-checkText mit CSS ausblenden, Best Practice?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy