Le format d'image PNG (Portable Network Graphic) est optimisé pour le web sans dégradation, il peut être transparent grâce à une couche alpha, celle-ci lui confère une transparence graduelle. En comparaison le format GIF ne possède qu'une transparence binaire.
On est tous d'accord pour dire que le PNG c'est chouette sauf sur Internet Explorer 6. Effectivement celui-ci ne gère pas la transparence et voici ce que vous verrez en affichant un PNG sur IE6.
Si vous êtes sur cette page, vous connaissez l'utilité de rendre compatible votre site Internet sur IE 6. Pour ceux qui se posent encore des questions ces statitistiques devraient y répondre.
Statistiques d'utilisation des Navigateurs Web en Europe pour l'année 2009
- Internet Explorer : 46,44 %
- Firefox : 39,25 %
- Opéra : 5,80%
- Chrome : 4,28 %
- Safari : 3,18%
- Autres : 1,05%
On peut voir qu'Internet Explorer est encore en tête des navigateurs les plus utilisés, malgrès tout Firefox le talonne de près. Et IE 6 dans tout ça ? bien voyez le détail ci-dessous :
8,16 % des Internautes "Européens" utilisent toujours IE6 ! impossible donc de faire l'impasse sur la compatibilité IE6. Rentrons dans le vif du sujet.
Les filtres AlphaImageLoader
Internet Explorer embarque un système propriétaire utilisant Directx pour certaines manipulations graphiques. On peut utiliser cette propriété via un Javascript ainsi qu'en CSS.
Méthode CSS
Tout d'abord il faut charger une feuille de style qui ne sera lue que par les navigateurs Internet Explorer de version égale et inférieure à la version d'IE 6.
<!--[if lte IE 6]>
<link href="css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
Dans l'exemple suivant nous allons placer un background en PNG
css/style.css
div.logo {
width:200px;
height:100px;
background: url(../images/logo.png) no-repeat;
}
css/ie6.css
div.logo {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/logo.png', sizingMethod='scale');
}
Remarques :
Vérifiez le chemin de l'image sur le filter, celui-ci débute à partir de la racine du site au contraire d'un background traditionnel.
3 options pour la propriété sizingMethod :
- scale : étire l'image aux dimension du conteneur,
- image : réduit ou agrandit le conteneur pour s'adapter aux dimensions de l'image,
- crop : rogne l'image pour s'adapter au conteneur.
L'utilisation de cette méthode pose 2 problèmes majeurs :
- Il est impossible de répéter un background avec la propriété AlphaImageLoader (sauf images unies en utilisant la sizingMethod scale)
- Il peut arriver que les liens href soient inactifs, on peut généralement résoudre ce problème en passant le conteneur en position relative ou en lui redonnant le layout avec la propriété css zoom:1
IE PNG Fix
Ce Javascript ajoute le support quasi-native PNG de l'opacité alpha pour IE 5.5 et 6. Grâce à ce script vous pouvez gérer la répétion de background mais aussi leur background-position, les tags <img> sont également pris en charge.