Nouvelle méthode de remplacement d’image en CSS

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

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

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



9 commentaires pour “Nouvelle méthode de remplacement d’image en CSS”

  1. cataras dit :

    Je comprend le principe. Dans l’idée c’est pas mal, mais ça fait aussi écrire plus de lignes… Tu y vois quel avantage au niveau de l’accessibilité ?

  2. Victor Brito dit :

    Pourquoi faire compliqué quand on peut faire simple ? À partir du moment où une image véhicule du contenu, il faut l’insérer en dur dans le HTML : élément img, avec un attribut alt convenablement rempli ; au moins, il s’agit d’une méthode très éprouvée et compatible avec l’accessibilité (que les images ou les CSS soient désactivées ou non, chargées ou non).

    • Bruno Bichet dit :

      Victor Brito -> Absolument d’accord ! Disons que là on parle d’images qui ne véhiculent pas de contenu et qui sont là pour faire jolies :)

  3. Thomas dit :

    Le lien « Nine Techniques for CSS Image Replacement » dans « Pour en savoir plus » pointe sur alsacreations.com !

  4. tom-over dit :

    Moi je trouve que ça peut être utile dans certain cas pour le référencement…

  5. Maxime Siméon dit :

    C’est pas mal comme méthode, mais je suis de l’avis de Victor Brito. A préciser, même si c’est évident, que l’élément .hide-text doit avoir un display:block ou inline-block cela ne fonctionne pas pour un élément inline.

    • cataras dit :

      Vous oubliez dans ce cas de séparer le fond de la forme… Ça peut marcher pour un graphique, mais par pour un habillage de titre par exemple… Pour faire les choses bien, il faut cumuler les deux solutions en fonction du contexte.

  6. tom-over dit :

    Je viens de tester cette astuce dans une navigation et c’est excellent pour remplacer une rubrique par un icone. Quelques exemples en vrac : – Accueil par une maison – Zone perso par un bonhomme – Recherche par une loupe

    j’ai décidé de l’adopter pour tout mes projets… merci Bruno pour cette découverte !

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site