Discussion :

[FirePrawn]

Je vous propose une traduction de l'article anglophone New technique to text-indent:-9999px hack par Paul Underwood : Masquer du texte sans utiliser la technique text-indent: -9999px.

N'hésitez pas à faire part de vos remarques, commentaires ou propositions d'améliorations !

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

[Bisûnûrs]

Salut,

Le titre de l'article dit :

sans utiliser la propriété text-indent.

Pourtant la solution est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

La propriété text-indent est toujours utilisée .. mais de manière différente.

[FirePrawn]

C'est pas faux, j'avais pas fait attention, erreur de ma part je corrige merci

[12monkeys]

Bonjour

Petite astuce très intéressante

Merci pour cette traduction.

[Muchos]

Merci pour les traductions. C'est toujours très enrichissant.

Mais je ne comprends pas… Il existe :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
visibility: hidden;
visibility: collapse;
display: none;

Bien sûr, l'article précise :

You will hear that [la technique du -9999px] can be harmful to your SEO as you are trying to hide content from the visitor of the site.

(Cependant [la technique du -9999px] peut être nuisible au référencement de votre site étant donné que vous masquez du contenu.)

Mais d'une part, la nouvelle technique aussi. D'autre part, on s'en fout de la SEO. J'ai plutôt songé à l'accessibilité (les lecteurs d'écran notamment).

[ornitho13]

Bonjour,

certains utilisent également la technique du line-height :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
.hide-text {
    line-height: 9999px;
    ...
}

ce qui revient au final à utiliser un text-indent mais de manière verticale

[4sStylZ]

Merci pour les traductions. C'est toujours très enrichissant.

Mais je ne comprends pas… Il existe :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
visibility: hidden;
visibility: collapse;
display: none;

J'avouerais que je suis comme Muchos. Je ne comprend pas pourquoi ne pas utiliser ces propriétés.

Elles sont natives. Causent-elles des anomalies?
Y'a t'il des gains à utiliser la fameuse méthode traduite?

[laffreuxthomas]

J'avouerais que je suis comme Muchos. Je ne comprend pas pourquoi ne pas utiliser ces propriétés.

Elles sont natives. Causent-elles des anomalies?
Y'a t'il des gains à utiliser la fameuse méthode traduite?

L'objectif de la bidouille du text-indent est de tromper les moteurs de recherche : leur faire croire que le texte est affiché (afin qu'ils l'utilisent pour choisir les mots qui référencent la page) alors qu'il ne l'est pas. L'idée est de l'utiliser par exemple lorsque le titre d'une page (balise "h1") ne contient qu'un logo.

Pour ma part je trouve ça douteux. Il est présomptueux d'espérer tromper Googlebot. Google a plusieurs algorithmes d'ajustement qui sont lancés (plus rarement que l'algo principal) afin de nettoyer les tricheurs. Même si on passe à travers les mailles aujourd'hui, il ne faudra pas s'étonner de se retrouver déréférencé un beau matin.

[Dany Ménard]

Autre possibilité :
dans "h1" : mettre un "p" contenant le texte et un "img" pour le logo,
donner une hauteur à "p" et lui enlever ses marges
s'assurer que le texte n'est ni plus haut ni plus large que l'image
donner une "position:absolute" ainsi que "margin:-(hauteur de "p")" à "img"

Résultat : le texte est caché par l'image.

html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<h1>
<p>texte</p>
<img src="logo.png">
</h1>

css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
p
{
margin:0px;
height:50px;
}
 
img
{
height:50px;
position:absolute;
margin-top:-50px;
}

[NoSmoking]

Bonjour,

dans "h1" : mettre un "p" contenant le texte et un "img" pour le logo,

Element p not allowed as child of element h1 in this context. (Suppressing further errors from this subtree.)

[Dany Ménard]

Bon, ton validateur est très chatouilleux parce-que ça marche avec : Chrome, Firefox, IE 9 et même IE 8.
Avec un "DOCTYPE html 4.01 strict".

On va donc changer ça pour

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div>
<h1>texte
</h1>
<img src="logo.png">
</div>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
h1
{
margin:0px;
height:50px;
}
 
img
{
height:50px;
position:absolute;
margin-top:-50px;
}