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?