Dans l’article Nouvelle méthode de remplacement d’image en CSS, je vous faisais part d’une nouvelle méthode de remplacement de texte par l’image en CSS proposée par Scott Kellum qui utilise la propriété text-indent avec un décalage en pourcentage. Cette méthode n’étant pas dénuée d’effets de bord (voir dans la suite de l’article), une nouvelle technique a fait son apparition lors de la mise à jour de HTML5 Boilerplate. Je vous propose une traduction de l’article Another CSS image replacement technique écrit par Nicolas Gallagher qui détaille une technique avec font-size :

«image replacement» : une autre technique

Une nouvelle technique de remplacement par l’image a récemment été ajoutée au projet HTML5 Boilerplate. Ce billet explique son fonctionnement et comment elle se situe par rapport aux autres méthodes, utilisant text-indent notamment.

Voici le bloc CSS qui a fait son apparition dans la récente mise à jour de HTML5 Boilerplate et le framework Compass :

.ir {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

Comment ça marche ?

1. font:0/0 a — Ce raccourci met à zéro les propriétés font-size et line-height. La valeur a fonctionne comme un raccourci pour font-family : font-size: 0; line-height: 0 et font-family: a. C’est une idée reprise de l’implémentation BEM. Bien que le validateur CSS fait sa chochotte avec les valeurs 0/0, il faut savoir que tous les navigateurs acceptent cette syntaxe et qu’il s’agit d’une erreur d’interprétation du validateur. En effet, si l’on utilise font: 0px/0, tout va bien, alors que dans le même temps, le validateur affiche font: 0/0.
2. text-shadow:none –- Permet de s’assurer que les ombres portées avec text-shadow sont supprimés du texte pour éviter l’apparition d’une ombre portée par-dessus le background.
3. color:transparent -– Requis pour les navigateurs qui ne parviennent pas à rendre le texte complètement invisible, comme Safari 4 ou certains navigateurs pour mobiles. Les versions d’Internet Explorer IE6/7/8 ne reconnaissent pas cette valeur pour la propriété color, mais heureusement, les versions IE7/8 ne montrent rien et IE6 n’affiche qu’une très légère trace du texte.

Dans HTML5 Boilerplate, nous avons également supprimé les éventuelles bordures et couleur de fond :

/* For image replacement */
.ir {
    border:0;
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
    background-color: transparent;
}

Cette précaution facilite l’utilisation de la classe CSS .ir sur les boutons ou les liens contenant explicitement un fond ou une bordure.

Avantages par rapport à text-indent

Cette nouvelle technique évite les problèmes posés par la méthode de remplacement via text-indent, notamment les pertes de performances. Notez que ces dernières affectent également la dernière méthode proposée par Scott Kellum qui vise au départ à améliorer les performances sur iPad 1.

1. Fonctionne sur IE6/7 sur les éléments de type inline-block. Cf. les problèmes liés aux techniques basées sur l’indentation de textes à l’adresse http://jsfiddle.net/necolas/QZvYa/show/
2. N’implique pas la création d’une boite en dehors de la surface visible de l’écran qui entraine une baisse des performances.
3. Plus besoin de spécifier d’alignement de texte ou de masquer le contenu qui dépasse car le texte de la nouvelle méthode ne prend tout simplement plus de place.
4. Inutile de masquer les éventuelles balises ou d’utiliser un contournement avec display:inline impliqué par l’indentation du texte.
5. En tout état de cause, cette technique nécessite moins de lignes de code.

Effets de bord

Aucun hack de remplacement par image n’est parfait :

1. Laisse une légère trace de texte sur IE6.
2. Implique de ne pas utiliser l’unité em pour les marges de l’élément sur lequel vous appliquez cette technique, vu que la taille du texte est réglé à zéro.
3. Windows-Eyes a un bug qui empêche la lecture du texte caché par cette méthode. Il n’y a en revanche aucun problème avec les autres lecteurs d’écran testés. Merci à @jkiss pour ses précisions et à @wilto pour avoir confirmé que cette méthode fonctionnait avec JAWS 12 dans IE 6/7/8 et Firefox 4/5/6.
4. Comme beaucoup de méthodes de remplacement par l’image, elle ne fonctionne pas si les CSS sont chargées mais que les images ne le sont pas.
5. Le texte n’est pas caché si le visiteur a une feuille de style utilisateur avec une déclaration font-size se terminant par !important pour l’élément où vous avez appliqué la class .ir.

Il est utile de noter que le remplacement par l’image utilisant les pseudo-éléments — NIR image replacement — évitent ses désagréments mais ne fonctionne pas correctement sur IE6/7.

Pour finir

J’utilise cette technique sans encombre depuis que Jonathan Neal et moi-même l’utilisons dans le cadre d’un test de clearfix commencé il y a un an environ. Le framework BEM utilise également cette technique pour ses icônes. L’idée principale fut proposée dès 2003 mais le rendu des navigateurs de l’époque n’a pas permis une large diffusion de cette méthode.

Si vous rencontrez des problèmes en utilisant cette technique, merci de détailler le bug.

Traduit de l’article Another CSS image replacement technique avec l’aimable autorisation de l’auteur ⁽¹⁾.

⁽¹⁾ Nicolas Gallagher (@necolas) est un développeur web front-end freelance basé à Londres. Il a co-créé Normalize.css et il fait partie des développeurs du projet HTML5 Boilerplate.

N’hésitez pas à me faire part de vos remarques sur les contresens (l’anglais était ma 3e langue), les fautes d’orthographe et d’une manière générale tout ce qui pourrait être préjudiciable à l’article d’origine.

Edit du 09/04/2012 — N’hésitez pas à jeter un oeil sur l’article : My thoughts about the latest Image Replacement techniques qui pointe les défauts de ces nouvelles méthodes de remplacement de texte par une image.