Masquer du texte sans utiliser la technique CSS text-indent: -9999px

Ce tutoriel est la traduction la plus fidèle possible du tutoriel original de Paul Underwood, New technique to text-indent:-9999px hack.

Il existe une technique bien connue qui relève plus de l'astuce pour masquer du texte en CSS : utiliser la propriété text-indent et lui assigner la valeur -9999px.

Cette manipulation a pour effet de déplacer le texte visé en dehors de la page et donc de le masquer aux yeux des utilisateurs. Cependant ceci peut être nuisible au référencement de votre site étant donné que vous masquez du contenu.

Mais si vous utilisez une image comme votre logo sur votre site vous allez ajouter une balise <img />.

<img src="logo.png" />

Le problème en utilisant une image comme logo est que vous n'avez pas les mots-clés du titre de votre site sur la page, vous pouvez ajouter le titre de votre site à l'attribut alt de votre image mais cela ne donnera pas autant d'importance à votre titre que si vous l'ajoutiez dans une balise <h1></h1>.

Mais en utilisant une balise <h1></h1> vous ne pouvez pas ajouter d'image comme logo, la seule façon de procéder est d'ajouter l'image en tant que background de votre balise <h1> et votre texte dans le <h1>. Cette méthode amène un autre problème : vous allez avoir à la fois votre logo et votre texte en tant que titre de votre site.

C'est là que la technique du text-indent entre en jeu. Si vous ajoutez le code CSS suivant vous pourrez avoir votre texte et votre logo à l'intérieur de la balise <h1>.

h1 {
    text-indent:-9999px;
    margin:0 auto;
    width:300px;
    height:100px;
    background:transparent url("images/logo.jpg") no-repeat scroll;
}

Cette technique fonctionne bien, mais présente un inconvénient au niveau des performances car le navigateur va automatiquement créer une zone géante de 9999 pixels en dehors de l'écran.

Il y a un article sur le site Zeldman qui explique comment masquer du texte sans utiliser la technique du text-indent.

Voici le code CSS correspondant :

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

Grâce à ce code, on place le texte en dehors de la page quelle que soit sa taille (différente en fonction de la résolution d'écran). Nous ajoutons le nowrap pour que le texte flotte en dehors de la page en continu et nous nous assurons qu'aucun overflow ne fasse apparaître le texte en utilisant overflow: hidden.

L'avantage de cette technique est le gain au niveau des performances, le navigateur n'ayant presque rien à faire en comparaison de la technique précédente.

Je tiens à remercier Paul Underwood de m'avoir autorisé à traduire son tutoriel.
Je remercie également ClaudeLELOUP pour sa relecture orthographique.