IE6 et le PNG transparent

03/09/2007 at 15:46 - [FR]

Tout web-développeur a déjà été confronté à ce problème : IE6 ne gére pas la transparence des PNG. De multiples solutions ont été inventées pour essayer d'y remédier.

Deux problèmes se posent :

kill ie

Pour le problème des images, le script de ce site web fonctionne à merveille. Pour le problème des fonds de blocs, c'est une autre paire de manches... IE6 ne peut pas gérer les PNG transparents avec répétition (c'est impossible à corriger), mais tous les scripts que j'ai pu dénicher sur internet appliquent soit au cas par cas une règle (celle du filtre DirectX), soit de manière généraliste ce filtre sur toute image PNG (empêchant de la même façon l'utilisation de PNG non-transparents comme image répétitive).

Pour pallier à cela, j'ai donc codé un petit script à poser dans votre code, qui se chargera de gérer tous les fonds transparents non-répétés :

  1. if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent)
  2. {
  3.     window.attachEvent("onload", alphaBackgrounds);
  4. }
  5.  
  6. function alphaBackgrounds()
  7. {
  8.     for (i = 0; i < document.all.length; i++)
  9.     {
  10.         var dai = document.all[i];
  11.         var bg = dai.currentStyle.backgroundImage;
  12.         if (bg && bg.match('/\.png"|\'\)$/i') != null)
  13.         {
  14.             var mypng = bg.substring(5, bg.length - 2);
  15.             if (dai.currentStyle.backgroundRepeat == 'no-repeat')
  16.             {
  17.                 dai.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='"+mypng+"', sizingMethod='crop')";
  18.                 dai.style.backgroundImage = 'none';
  19.             }
  20.         }
  21.     }
  22. }

Comme vous pouvez le voir (ou pas), il faut que l'image PNG à traiter possède la propriété CSS background-repeat: "no-repeat" pour fonctionner. Cela permet d'éviter de dégommer tous les fonds PNG non-transparents qui pourraient se répéter.

Une inclusion de ceci entre les balises <head>, newpngfix.js étant le fichier contenant le script ci-dessus, et c'est gagné :)

  1. <!--[if gte IE 5.5]>
  2.     <![if lt IE 7]>
  3.         <script defer type="text/javascript" src="newpngfix.js"></script>
  4.         <script defer type="text/javascript" src="pngfix.js"></script>
  5.     <![endif]>
  6. <![endif]-->

A propos, photo.ornthalas.net fonctionne maintenant sous IE6 :) Pas sous IE5.5 : y'a des problèmes d'alignement, et je vais pas me faire chier pour les utilisateurs de windows 98, faut pas déconner non plus.

CSS dotNetsoul

02/09/2007 at 00:35 - [FR]

J'ai refait la feuille de style de dotNetSoul, car elle était vraiment nulle.

Déjà que le logiciel vole vraiment pas haut, en plus la feuille de style de base est illisible. On se demande si la personne qui a codé le logiciel ne travaillait pas sur un écran en 640x480...

Ca peut en intéresser certains, donc la voici , à placer dans votre dossier d'install (typiquement dans C:\Program Files\dotNetSoul\Styles).

September 07

1