+ Répondre à la discussion Actualité déjà publiée
  1. #1
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 174
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 174
    Points : 21 860
    Points
    21 860

    Par défaut Masquer du texte sans utiliser la technique text-indent: -9999px



    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.

    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  2. #2
    Modérateur
    Avatar de Bisûnûrs
    Profil pro
    Développeur Web
    Inscrit en
    janvier 2004
    Messages
    9 858
    Détails du profil
    Informations personnelles :
    Âge : 34
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : janvier 2004
    Messages : 9 858
    Points : 16 229
    Points
    16 229

    Par défaut

    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.

  3. #3
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 174
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 174
    Points : 21 860
    Points
    21 860

    Par défaut

    C'est pas faux, j'avais pas fait attention, erreur de ma part je corrige merci
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  4. #4
    Expert éminent
    Avatar de 12monkeys
    Homme Profil pro
    Webmaster
    Inscrit en
    novembre 2006
    Messages
    4 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : novembre 2006
    Messages : 4 093
    Points : 9 046
    Points
    9 046

    Par défaut

    Bonjour

    Petite astuce très intéressante

    Merci pour cette traduction.
    Vous souhaitez participer à la rubrique (X)HTML/CSS, contactez moi.
    débutez avec les CSS
    Pas de MP pour des questions techniques ! Mode d'emploi du forum ; Règles ; Pensez à la balise code ; Pas de SMS !
    Votez pour les messages qui vous ont aidés...

  5. #5
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Sans emploi
    Inscrit en
    décembre 2011
    Messages
    1 699
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Sans emploi
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 699
    Points : 3 832
    Points
    3 832
    Billets dans le blog
    6

    Par défaut

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

    ---
    Debug the Web together!

  6. #6
    Rédacteur

    Homme Profil pro
    Responsable de projet
    Inscrit en
    mai 2009
    Messages
    634
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France

    Informations professionnelles :
    Activité : Responsable de projet
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : mai 2009
    Messages : 634
    Points : 3 614
    Points
    3 614

    Par défaut

    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

  7. #7
    Membre confirmé Avatar de 4sStylZ
    Homme Profil pro
    Null
    Inscrit en
    novembre 2011
    Messages
    209
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Null
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : novembre 2011
    Messages : 209
    Points : 581
    Points
    581

    Par défaut

    Citation Envoyé par Muchos Voir le message
    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?

  8. #8
    Membre confirmé

    Développeur Web
    Inscrit en
    mars 2002
    Messages
    409
    Détails du profil
    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : mars 2002
    Messages : 409
    Points : 623
    Points
    623

    Par défaut

    Citation Envoyé par 4sStylZ Voir le message
    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.

  9. #9
    Candidat au Club
    Homme Profil pro
    Webmaster
    Inscrit en
    mai 2013
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Industrie

    Informations forums :
    Inscription : mai 2013
    Messages : 2
    Points : 3
    Points
    3

    Par défaut Autre possibilité

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

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 952
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 952
    Points : 25 538
    Points
    25 538

    Par défaut

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

  11. #11
    Candidat au Club
    Homme Profil pro
    Webmaster
    Inscrit en
    mai 2013
    Messages
    2
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Industrie

    Informations forums :
    Inscription : mai 2013
    Messages : 2
    Points : 3
    Points
    3

    Par défaut

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

Discussions similaires

  1. Masquer du texte sans utiliser la technique text-indent: -9999px
    Par FirePrawn dans le forum Mise en page CSS
    Réponses: 7
    Dernier message: 31/08/2012, 10h36
  2. Réponses: 5
    Dernier message: 30/04/2008, 18h42
  3. Réponses: 3
    Dernier message: 07/09/2007, 15h14
  4. masquer les doublons sans utiliser distinct
    Par Misato dans le forum IHM
    Réponses: 3
    Dernier message: 07/06/2007, 12h06

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo