web-dev-qa-db-fra.com

Masquer le texte avec CSS, meilleure pratique?

Disons que j'ai cet élément pour afficher le logo du site:

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

Le #blog-title Serait stylé avec background:url(http://website.com/logohere.png), mais comment masquer correctement le texte Website Name? Comme on le voit ici: Masquer le texte en utilisant css ou ici https://stackoverflow.com/a/2705328 , j'ai déjà vu diverses méthodes pour masquer le texte, telles que:

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

ou

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

ou

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

J'ai aussi vu certains combiner ces trois méthodes. Mais en réalité, quelle est la meilleure pratique pour masquer le texte efficacement?

htmlcsshide
41
deathlock

En fait, une nouvelle technique est sortie récemment. Cet article répondra à vos questions: http://www.zeldman.com/2012/03/01/replacing-le-9999px-hack-new-image-replacement

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

Il est accessible et offre de meilleures performances que -99999px.

Mise à jour : Comme @deathlock le mentionne dans la zone de commentaire, l'auteur du correctif ci-dessus ( Scott Kellum ), a suggéré d'utiliser a police transparente : http://scottkellum.com/2013/10/25/the-new-kellum-method.html .

76
coopersita

vous pouvez simplement le rendre transparent

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

Ne pouvez-vous pas utiliser simplement display: none; comme ça

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;
}

Ou que diriez-vous de jouer avec la visibilité si vous souhaitez réserver de la place

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

la plupart des développeurs feront comme suit:

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

.webname {
   display: none;
}

J'avais l'habitude de le faire aussi, jusqu'à ce que je réalise que vous cachez du contenu pour les appareils. aka lecteurs d'écran et autres.

Donc en passant:

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

vous vous assurez que le texte est toujours lisible.

3
Mark

Ajoutez la classe .hide-text à votre étendue contenant le texte

.hide-text{
display:none;
 }

ou rendre le texte transparent

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

utiliser selon votre cas d'utilisation.

2
Dhruv Batheja

Je le fais comme ça:

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

Ce dont Google (moteur de recherche) a besoin, c’est le même contenu qui doit être transmis à l’utilisateur comme à l’utilisateur. Indenter du texte (n'importe quel texte) amène les bot à penser que c'est un spam ou que vous fournissez un contenu différent à l'utilisateur et à bot.

La meilleure méthode consiste à utiliser directement le logo en tant qu'image dans votre balise d'ancrage. Donnez un 'alt' à votre image. Ce sera parfait pour le bot à lire et aidera également dans la recherche d'images.

Ceci vient directement de la bouche du cheval: http://www.youtube.com/watch?v=fBLvn_WkDJ4

0
Neeraj

Depuis septembre 2015, la pratique la plus courante consiste à utiliser les CSS suivants:

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

Si vous êtes prêt à accepter cela dans votre balise (comme dans votre question avec la conservation du texte), j'utiliserais l'interface utilisateur jQuery utilisée dans leurs CSS helpers :

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

Les techniques de remplacement d'image sont utiles si vous refusez absolument d'ajouter du balisage supplémentaire pour que le texte soit masqué dans le conteneur de l'image.

0
millimoose