Tutorial - Comment afficher les zones transparentes d'une image PNG sous Internet Explorer en une seule ligne CSS.
Un autre problème que j'ai eu à la création de Pixtiz fût la
compatibilité des images PNG avec Internet Explorer et je pense que
tout le monde a déjà eu ce souci.
En effet, les
zones transparentes deviennent bleues pour toutes les versions d'IE.
Pour résoudre ce problème, il y a plusieurs solutions :
- Utiliser le progid Microsoft sur chaque image
- Utiliser un script JavaScript qui automatise cette opération
- Utiliser la propriété behavior CSS
Je vais présenter dans ce tutorial la solution la plus simple à mettre en place et que j'utilise sur Pixtiz, la
propriété CSS behavior.
C'est grâce à cette technique que les drapeaux (
images PNG avec une ombre portée) en haut du site d'affichent parfaitement.
Avantages de la méthode par behavior CSS
- Très simple à mettre en place pour l'intégralité de son site
- Pas besoin de modifier son code (pas d'ajout dans les balises IMG)
- Pas besoin d'ajouter un script JavaScript dans les balises head de toutes ses pages
- Garde toutes les fonctionalités de l'image (liens hypertextes ...) pour le référencement
Inconvenient de la méthode par behavior CSS
- La propriété behavior n'est pas valide W3C
- Vous voyez l'image avec les zones encore bleues très rapidement si vous avez une petite connexion
Implanter cette methode pour votre site
Première chose à faire,
télécharger le fichier zip contenant tous les fichiers nécéssaires.
Décompressez cette archive et placez le dossier "pngHack" directement dans le root de votre serveur.
Gardez bien ce nom de dossier.
Pour que le script fonctionne, n'oubliez pas de
préciser les propriétés width et height de votre image PNG dans la balise sinon celle-ci
sera redimensionnée en 1x1 pixel.
Dans votre fichier CSS, ajoutez cette portion de code :
img {behavior: url(/pngHack/pngHack.htc);}
Cela
affectera toutes les images de votre site, pas besoin donc de modifier le code à l'intérieur des pages.
Si vous n'aviez pas de feuille CSS liée à votre page, ajouter simplement entre les balises head :
<link rel=stylesheet href="/pngHack/pngHack.css" type="text/css">
Ressources
Voir le site officiel du site de l'auteur du pngHack [en]
Télécharger les fichiers à copier sur son serveur
Si vous avez des
problèmes avec l'affichage de vos images PNG, laissez un commentaire sur cet article.
dans ma feuille CSS j'ai mis
img {behavior: url(pngHack/pngHack.htc);}
et dans la ligne contenant mon image j'ai indiqué les dimensions de mon image:
.....
background-image: url('images/button.png'); width:50px ; height:21px;
un avis ? merci