webentwicklung-frage-antwort-db.com.de

Text mit CSS ausblenden, Best Practice?

Angenommen, 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 #blog-title Würde mit background:url(http://website.com/logohere.png) formatiert, aber wie kann man den Text Website Name Richtig verbergen? Wie hier zu sehen: Text mit CSS ausblenden oder hier https://stackoverflow.com/a/2705328 , habe ich verschiedene Methoden zum Ausblenden des Texts gesehen, 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 kombinierten. Aber welches ist eigentlich die beste Methode, um Text effektiv zu verbergen?

41
deathlock

Tatsächlich ist kürzlich eine neue Technik herausgekommen. 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.

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

76
coopersita

sie können es einfach transparent machen

{
   width: 20px;
   height: 20px;
   overflow: hidden; 
   color:transparent;
}
15
Yukulélé

Kannst du nicht einfach 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 mit Sichtbarkeit zu spielen, wenn Sie den Platz reservieren möchten

.webname {
   visibility: hidden;
}
6
Mr. Alien

die meisten Entwickler werden wie folgt vorgehen:

<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. aka Screen-Reader und so.

Also vorbei:

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

sie stellen sicher, dass der Text noch lesbar ist.

3
Mark

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

.hide-text{
display:none;
 }

oder machen Sie den Text transparent

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

verwenden Sie entsprechend Ihrem Anwendungsfall.

2
Dhruv Batheja

So mach ich es:

.hidden-text {
  left: 100%;
  display: inline-block;
  position: fixed;
}
0
isapir

Was Google (Such-Bot) benötigt, ist, dass dem Bot derselbe Inhalt bereitgestellt wird wie dem Nutzer. Wenn Sie Text wegrücken (beliebigen Text), wird der Bot als Spam eingestuft, oder Sie stellen Benutzern und Bot unterschiedliche Inhalte zur Verfügung.

Am besten verwenden Sie das Logo direkt als Bild in Ihrem Ankertag. Geben Sie Ihrem Bild ein "Alt". Dies ist perfekt für Bot zu lesen und hilft auch bei der Bildsuche.

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

0
Neeraj

Ab September 2015 wird am häufigsten das folgende CSS verwendet:

.sr-only{
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    overflow: hidden;
    position: absolute !important;
    width: 1px;
}
0
Joel Kinzel

Wenn Sie bereit sind, dies in Ihrem Markup unterzubringen (wie Sie in Ihrer Frage mit dem Halten des Textes sind), würde ich mit dem jQuery-UI gehen, mit dem in ihrem 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 verborgen werden soll.

0
millimoose