Pablo Prieto - Blog - internet explorer

Les bugs d'IE7

Pab. — Mon, 06 Nov 2006 10:05:00 +0100

Il n'aura pas fallu longtemps avant de découvrir qu'IE7 avait lui aussi quelques petits problèmes d'interprétation, notamment en matière de DOM et CSS... plusieurs sites recensent déjà les bugs spécifiques à cette version :

Ces quelques liens sont donc à garder sous le coude en cas de désaccord profond entre IE7 et les autres.

Alors attention, IE7 reste néanmoins une grande avancée par rapport à son prédécesseur, et certain de ces bugs CSS listés dans cette page ne sont pas très critiques, c'est à dire qu'on a peu de chance de les croiser tous les jours (à la différence d'un peekaboo bug par exemple sous IE6). Bref si vous voulez mon avis, IE7 est un bon navigateur même si il a ses limites, comme les autres ;)

De l'art d'insérer une animation Flash

Pab. — Wed, 20 Sep 2006 12:03:00 +0200

Détection du plugin, contenu alternatif, "Active Content"... vouloir simplement mais proprement insérer une animation Flash dans sa page relève aujourd'hui du parcours du combattant...

La méthode "classique"

Voici le code que nous propose Flash lorsque il génère une page html pour contenir notre animation :

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="550" height="400">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="animation.swf" />
<embed src="animation.swf" width="550" height="400" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

On s'est donc depuis toujours contenté de ce code, pour la simple raison que ça fonctionne. Mais il pose un problème de taille : il n'est pas du tout compatible XHTML 1.0 Strict, la faute à l'élément obsolète embed, crée par Netscape à la bonne époque.

La méthode "Flash Satay"

Pour palier à ce problème, Drew McLellan a publié en 2002 (déjà...) un article sur A List Apart intitulé "Flash Satay: Embedding Flash While Supporting Standards". Voici le code correspondant à sa méthode :

<object type="application/x-shockwave-flash" data="animation.swf" width="550" height="300">
<param name="movie" value="animation.swf" />
Contenu alternatif
</object>

Cette méthode repose donc sur l'utilisation exclusive de l'élément object, en conformité avec la norme XHTML Strict. Autre avantage, le contenu alternatif est inclus directement à l'intérieur de l'élément, dans le cas ou le navigateur se trouve incapable de lire l'animation.

Génial donc... pas tout à fait malheureusement :

Cette méthode empêche Internet Explorer de lire l'animation en chargement progressif, c'est à dire qu'il attend que celle-ci soit complètement chargée avant de pouvoir la lire, plutôt embêtant donc pour des animation "lourdes".
Le contenu alternatif n'est pas lu par JAWS

Pour le premier point, on peux bien contourner le problème en chargeant un premier Flash vide (donc léger) qui chargera ensuite l'animation principale avec la fonction loadMovie, mais appliquer ce principe à chaque fois est plutôt rébarbatif.

Comme si ça ne suffisait pas, il faut depuis peu prendre en compte l'activation des contenus actifs sous Internet Explorer. Kezako ? Suite à une sombre histoire de procès, le contenu actif (animations Flash, mais aussi applets Java, films Quicktime, etc...) ne sera pas interactif (il ne sera pas réceptif aux événements souris ou clavier, par exemple) tant que l'utilisateur n'aura pas cliqué une première fois pour activer le contrôle.

Passer par javascript

La seule solution pour contourner ce problème, et rendre les animations directement utilisables sous Internet Explorer, est de passer par du javascript pour insérer notre animation. Adobe a notamment proposé sa solution, disponible ici, Microsoft en propose une autre là.

SWFObject

Au delà de ces solutions est apparue SWFObject (anciennement FlashObject, mais Adobe n'a pas aimé l'utilisation du terme "Flash"...) qui combine très bien les différentes solutions à tous ces problèmes :

C'est également une solution Javascript, donc ça règle le souci de l'Active content sous IE
De ce fait, c'est compatible XHTML
Le flash vient dynamiquement remplacer un bloc HTML que l'on détermine dans la page et détecte la version du plugin Flash. Si celui-ci n'est pas installé ou la version n'est pas suffisante, le contenu HTML reste affiché comme contenu alternatif.

Après quelques tests, c'est une solution fiable et la plus simple à utiliser. Le script principal fait une dizaine de ko, ce qui reste très raisonnable.

Bien sur on continue de passer par du Javascript, seul moyen d'éviter l'activation sous IE. Si celui-ci est désactivé, alors le contenu alternatif s'affichera même si l'internaute dispose de Flash. Mais on est bien aujourd'hui obligé de faire ce choix.

SWFObject est displonible ici.

Les nouveautés d'IE7

Pab. — Wed, 23 Aug 2006 18:15:00 +0200

Finalement, la IE team de chez Microsoft vient de publier la liste complète des améliorations et corrections du prochain IE7. Ils reconnaissent eux-même qu'il reste pas mal de boulot mais la longueur de la liste fait tout de même plaisir ;)

IE6 et PNG, je t'aime moi non plus

Pab. — Mon, 07 Aug 2006 09:54:00 +0200

Malgré le bug d'IE6 empêchant l'affichage des PNG transparents (32 bits) il existe quelques solutions de contournement. Je vais essayer de rassembler dans ce billet les différents techniques utilisées, en insistant sur leur fiabilité dans la pratique, si vous décidez de les utiliser dans le cadre d'un projet professionnel.

Cas d'un PNG dans une CSS (en image de fond)

Cette technique fonctionne à 2 conditions :

le bloc recevant l'image de fond doit être positionné en absolute ou avoir ses propriétés width ou height fixées
l'image ne peut être ni répétée ni positionnée

Voici un bloc auquel nous allons appliquer un png en image de fond :

<div id="test">	
	<ul>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
	</ul>		
</div>

Voici ensuite le code CSS :

#test{
	width:400px;
	background: url("fond.png") no-repeat  0 0;
}

Pour IE, grâce aux commentaires conditionnels, nous allons ensuite annuler l'image de fond et appliquer la propriété filter à la place :

<!--[if lt IE 7]>
<style type="text/css" media="screen">
#test{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fond.png', sizingMethod='crop');
}
</style>		
<![endif]-->

la propriété sizingMethod peut recevoir comme valeur 'image', 'scale' ou 'crop'. La valeur 'scale' ajuste les dimensions de l'image à la taille du bloc, pour plus de détail je vous invite à consulter la doc officielle chez Microsoft.

Bizarrement, l'url de l'image dans la propriété filter doit être relative à la page html, et non à la feuille de style, pensez-y si les 2 fichiers ne sont pas au même niveau.

Un problème de liens...

Vous allez maintenant vous rendre compte que les liens à l'intérieur de notre bloc ne fonctionnent pas... plutôt bloquant.

Pour y remédier, il faut alors rajouter la propriété position:relative aux liens :

<!--[if lt IE 7]>
<style type="text/css" media="screen">
#test{
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fond.png', sizingMethod='crop');
}	
#test a{
	position:relative;
}
</style>		
<![endif]-->

Et voilà, les liens redeviennent cliquables.

Cas d'une image dans le corps de page

Ici une seule condition : les attributs width et height de l'image doivent être fixés.

Le principe consiste à remplacer l'image par un gif transparent et lui appliquer en fond le png grâce à l'attribut filter ci-dessus. Ce comportement peut être automatisé grâce à un fichier htc (à télécharger en annexe). On applique simplement ce comportement aux images, avec la propriété CSS behavior :

img{
	behavior: url("png.htc");
}

pour affiner la chose, on peut choisir de l'utiliser dans une classe :

img.png{
	behavior: url("png.htc");
}

<img src="image.png" width="100" height="100" alt="" class="png" />

Placez de préférence les fichiers png.htc et blank.gif au même endroit que votre page html. Ici encore, l'url du fichier htc doit être relative à la page html, et non à la feuille de style.

Bien évidement, behavior et filter ne sont pas des propriétés valides. Encore une fois utilisez les commentaires conditionnels ;)

Pour conclure, je vous conseille de rester prudent avec ces techniques sur des projets sensibles (et des clients pointilleux... ;) ), et prenez le temps de tester "en conditions réelles" avant de vous prononcer sur la faisabilité.