Nouvelle méthode de remplacement d’image en CSS

Pour remplacer du texte par une image avec CSS, il existe au moins neuf méthodes, dont deux ont été largement utilisées par les intégrateurs web. Vous trouverez à la fin de l’article une dixième méthode que je n’ai pas encore testée qui devrait allier performance et accessibilité. Elle nous vient tout droit de chez Jeffrey Zeldman.

FIR (Fahrner Image Replacement)

<h1>
    <span>Fahrner</span>
</h1>
h1 {
    background-image:url(/images/logo.png);
    background-repeat:no-repeat;
    height:100px;
}

span {
    display:none;
}

Malheureusement, cette méthode censée garantir à tous une bonne accessibilité se mettait la souris dans l’oeil (cf. http://www.alsacreations.com/article/lire/567-Remplacement-d-images-halte-au-display-none.html).

Phark Method

<h1 class="hide-text">
    Phark Method
</h1>

.hide-text {
    width: 350px;
    height: 75px;
    background: url("images/logo.png");
    text-indent: -9999px;
}

Kellum Method (new image replacement)

<h1 class="hide-text">
    Kellum Method
</h1>

.hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: url("images/logo.png");
}

Pour en savoir plus

• Replacing the -9999px hack (new image replacement)
• Nine Techniques for CSS Image Replacement
• Remplacement d’images : halte au display none !