Cacher du texte sur une page web

Il est souvent arrivé aux intégrateurs ou développeurs web de devoir chercher à cacher du texte sur un site en utilisant l’astuce du text-indent: -9999px; en css. D’accord, le texte n’apparait plus à l’écran, il est déplacé en dehors de la page.

L’utilisation de cette astuce pose 2 soucis :

  • cela va déjà faire générer aux navigateur une zone de 9999 pixels (en dehors de l’écran), ce qui se ressent sur les performances de votre site.
  • cacher du contenu n’est pas recommandé dans le cadre du référencement, les moteurs de recherches pouvant vous pénaliser

Je vous recommande une autre technique, plus performante :
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

Avec ce code, quelque soit la taille du texte celui-ci sera en dehors de l’écran, la propriété « white-space: nowrap; » faisant flotter le texte en dehors de la page et « overflow: hidden; » garanti que le texte n’apparaîtra pas dans un overflow.

Source du code : www.zeldman.com

Comments (2)

Leave a Comment