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

:salut:

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 !

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

:merci:

Salut,

Le titre de l'article dit :

Citation:

---

sans utiliser la propriété text-indent.

---

Pourtant la solution est :

Code:

---

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.

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

Bonjour

Petite astuce très intéressante :ccool:

Merci pour cette traduction.

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

Mais je ne comprends pas… Il existe :

Code:

---

1 2 3 4

visibility: hidden; visibility: collapse; display: none;

---

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

Citation:

---

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).

Bonjour,

certains utilisent également la technique du line-height :

Code:

---

1 2 3 4 5

.hide-text { line-height: 9999px; ... }

---

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

Citation:

---

Envoyé par Muchos

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

Mais je ne comprends pas… Il existe :

Code:

---

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?

Citation:

---

Envoyé par 4sStylZ

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.

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:

---

1 2 3 4

<h1> <p>texte</p> <img src="logo.png"> </h1>

---

css

Code:

---

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

---

Bonjour,

Citation:

---

Envoyé par Dany Ménard

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

---

Citation:

---

Envoyé par validation

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

---

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:

---

1 2 3 4 5

<div> <h1>texte </h1> <img src="logo.png"> </div>

---

Code:

---

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

---