Ausblenden von Text mit CSS, Beste Praxis?

Sagen wir, ich habe das element für die Anzeige der website-logo:

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

Den #blog-title würde gestylt werden-mit background:url(http://website.com/logohere.png)aber wie man richtig verstecken den text Website Name? Wie hier zu sehen: Ausblenden von text mit css oder hier https://stackoverflow.com/a/2705328 , ich habe gesehen, verschiedene Methoden zum verbergen von text, wie:

#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 gesehen, einige die Kombination dieser drei Methoden. Aber eigentlich welches ist die beste übung zum ausblenden von text wirksam?

InformationsquelleAutor der Frage deathlock | 2012-10-08

  1. 75

    Tatsächlich, eine neue Technik kam vor kurzem. In diesem Artikel werden Ihre Fragen beantworten: http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement

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

    Ist zugänglich, eine bessere Leistung als 99999px.

    Update: @deathlock erwähnt in dem Kommentar, der Autor der fix oben (Scott Kellum), hat vorgeschlagen, mit einem transparente Schrift: http://scottkellum.com/2013/10/25/the-new-kellum-method.html.

    InformationsquelleAutor der Antwort coopersita

  2. 15

    können Sie einfach machen es transparent

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

    InformationsquelleAutor der Antwort Yukulélé

  3. 5

    Können Sie nicht verwenden, einfach display: none; wie diese

    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 über das Spiel mit der Sichtbarkeit, wenn Sie besorgt sind, uns den Raum

    .webname {
   visibility: hidden;
}

    InformationsquelleAutor der Antwort Mr. Alien

  4. 3

    dass die meisten Entwickler tun werden, 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;
}

    Ich verwendet, um es zu tun, bis ich merkte, dass Sie versteckt sind, die Inhalte für die Geräte. aka-Bildschirm-Leser und solche.

    Also durch die übergabe:

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

    stellen Sie sicher, dass der text noch lesbar ist.

    InformationsquelleAutor der Antwort Mark

  5. 3

    Hinzufügen .hide-text-Klasse, um Ihre Spannweite, die den text

    .hide-text{
display:none;
 }

    oder machen Sie den text transparent

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

    verwenden Sie entsprechend Ihrem Anwendungsfall.

    InformationsquelleAutor der Antwort Dhruv Batheja

  6. 0

    Wenn Sie bereit sind, zu empfangen, diese im markup (wie Sie in Ihrer Frage mit der Abhaltung der text), würde ich gehen mit was auch immer jQuery-UI ging mit in Ihre CSS-Helfer:

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

    Dem image-replacement-Techniken sind gut, wenn Sie absolut weigern, hinzufügen von extra-markup-Code für den text in den container für das Bild.

    InformationsquelleAutor der Antwort millimoose

  7. 0

    Was Google(search bot) braucht, ist gleichen Inhalt serviert werden sollte, bot, wie es serviert wird, um Benutzer. Einrücken von text Weg (text) bekommt bot, zu denken es ist ein spam-oder Sie bedienen unterschiedliche Inhalte für user und bot.

    Die beste Methode ist, um direkt mit logo als Bild in Ihrem Anker-tag. Geben Sie ein 'alt' zu deinem Bild. Dies wird perfekt sein für die Bots zu Lesen & auch hilft Sie im Bild suchen.

    Dies ist gerade aus dem Maul des Pferdes: http://www.youtube.com/watch?v=fBLvn_WkDJ4

    InformationsquelleAutor der Antwort Neeraj

  8. 0

    Ab September 2015 die gängige Praxis ist, verwenden Sie die folgende CSS:

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

    InformationsquelleAutor der Antwort jkinz

  9. 0

    Ich es so machen:

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

    InformationsquelleAutor der Antwort isapir

  10. -2

    Ich weiß, das ist eine alte Frage, aber das Bootstrap-framework hat einen eingebauten Klasse (sr-only) zu behandeln ausblenden von text-auf-alles-aber-screen-Leserinnen und Leser:

    <a href="/" class="navbar-brand"><span class="sr-only">Home</span></a>

    InformationsquelleAutor der Antwort Jim T.

Schreibe einen Kommentar