PNG Hack

Wikipedia - Démonstration de png transparentCet article expose deux méthodes. Elles sont rapides à mettre en œuvre et notre ami à tous, Internet Explorer dans ses versions inférieures à 7, prendra enfin en compte la transparence des images au format PNG.
Voilà pourquoi l’article s’appelle png hack. Car ce qui va vous être proposé dans cet article fonctionne, mais reste de la bidouille (hack = bidouille).

Tant qu’Internet Explorer 6 et inférieur continueront d’être utilisés, ce hack sera utile.
D’ici quelques années (le temps que les administrations passent de Windows 98 à Windows 7 (allez même XP)), ce hack sera inutile et fera parti de l’histoire ancienne du développement web.

Sommaire:

Hack CSS

Image png utiliséz en arrière plan (background) d’un bloc. Elle est définie dans une feuille de style.

div#monDiv {
	width: 150px;
	height: 150px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');
}

html>body #monDiv {
	filter: none;
	background: url('image.png') no-repeat;
}

La première partie est utilisée par Internet Explorer et met en oeuvre un filtre spécifique à lui. Le sélecteur html>body est un sélecteur valide en CSS mais inconnu d’Internet Explorer 6 et inférieur, donc il ne prend pas en compte les éléments compris dans ce type de sélecteur. Cependant Internet Explorer 7 lui les prend en compte, c’est pour cette raison que l’on définit l’attribut « filtre » à « none ». Si nous n’annulons pas le filtre, Internet Explorer 7 affichera deux fois l’image, ce qui est normal au vu du fait qu’il passe dans les deux éléments. Dans le cas où l’élément n’a pas d’identifiant mais une classe on peut utiliser le code suivant.

Il est possible qu’avec cette méthode votre image PNG ne s’affiche pas, essayer de mettre le chemin complet d’accès à l’image dans l’attribut « src ».

Il est aussi possible d’utiliser ce sélecteur «  * html « , celui-ci n’est reconnue que par Internet Explorer 6. Les autres navigateurs ignore les instructions de ce sélecteur.

* html div.monDiv {
	width: 150px;
	height: 150px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png');
}

div[class="monDiv"] {
	filter: none;
	background-image: url('image.png');
}

Méthode de test

Pour faire le test, j’ai utilisé ces différentes images.
L’image au format PNG Transparent (sur fond blanc ici) (256x204px) :
Tux Saint Valentin

Un arrière plan placé dans l’élément body (300x300px):
Background pour le test

Voici le html et css de test :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="title" content="PNG Fix - Hack PNG IE6" />
		<title>PNG Fix - Hack PNG IE6</title>

		<style type="text/css">
			body {
				background: #E1EBF2 url(fond_5.jpg) no-repeat top left;
			}
			div#sa {
				width: 150px;
				height: 150px;
				filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
				border: 3px solid red;
			}
			html>body #sa {
				filter: none;
				background: url('image.png') no-repeat;
			}
		</style>
	</head>
	<body>
		<div id="sa">
			<p>&nbsp;</p>
		</div>
	</body>
</html>

Voici un imprime écran de Internet Explorer 6 sans l’utilisation du filtre :
image png avec internet explorer 6 sans filtre
On remarque bien que le fond de l’image du pingouin (Tux de son petit nom) est gris sans transparence.

La propriété sizingMethod :

La propriété sizingMethod permet de définir ou récupérer (en javascript) la manière d’afficher une image dans les limites de l’objet AlphaImageLoader.

Trois possibilités :

crop : Coupe l’image aux dimensions de l’objet/élément dans lequel elle est intégrée.

div#monDiv {
	width: 150px;
	height: 150px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
}

filtre AlphaImageLoader - sizingMethod = crop
On le remarque bien ici, Tux est tronqué.

image : Applique les dimensions de l’image à l’objet/élément dans lequel elle est intégrée.
Si une hauteur ou largeur est définie pour le même bloc, ces informations seront ignorées.

div#monDiv {
	width: 150px;
	height: 150px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='image');
}

filtre AlphaImageLoader - sizingMethod = image
Ici l’image de Tux garde ses proportions et sort de l’élément div. Cependant, l’élément div garde ses proportions de 150x150px.

Scale : Étire ou réduit l’image pour remplir l’intérieur des frontières de l’objet/élément.

div#monDiv {
	width: 150px;
	height: 150px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');
}

filtre AlphaImageLoader - sizingMethod = scale
Ici l’image de Tux a été mise à l’échelle de l’élément div, soit 150x150px.

Hack JavaScript

Je vais ici présenter l’utilisation d’un hack ou bidouille en français.
En quoi consiste cette méthode ?
Elle fait exactement la même chose que la précédente, c’est-à-dire, forcer la transparence des images au format PNG pour le navigateur Internet Explorer.
Alors pourquoi utiliser celle-ci plutôt que la précédente ?
Pour la simple raison qu’elle ne s’applique pas aux même cas.
La première méthode s’applique dans le cas où l’on intègre un PNG dans une feuille de style.
Dans le cas présent, ce hack propose de régler les problèmes de transparence mais lorsque les images sont présentes dans une page web, et non définies dans la feuille de style.

Ce hack se présente sous la forme d’un fichier JavaScrip. Il doit être inclus entre les balises head de cette manière :
Pour télécharger le fichier c’est par ici : http://homepage.ntlworld.com/bobosola/pngfix.js L’attribut defer permet de charger un script seulement une fois que tout le reste de la page est chargé. Ce script va chercher toutes les images au format PNG et les remplacer par des éléments span, reprenant les attributs id, class et title. Quand à l’image elle est intégrée à l’élément en tant que fond et le filtre « lphaImageLoader » est automatiquement appliqué avec la propriété scale. Pour ce script, il n’est pas nécessaire de préciser la hauteur et la largeur de l’image dans les attributs de celle-ci. Pour le test j’ai repris les images ci-dessus. Voici le code HTML utilisé :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="title" content="PNG Fix - Hack PNG IE6" />
		<title>PNG Fix - Hack PNG IE6</title>

		<style type="text/css">
			body {
				background: #E1EBF2 url(fond_5.jpg) no-repeat top left;
			}
		</style>

		<!--[if lt IE 7]>
			<script type="text/javascript" src="pngfix.js" defer="defer"></script>
		<![endif]-->
	</head>
	<body>
		<div id="sa">
			<img src="image.png" alt="tux" title="tux" />
		</div>
	</body>
</html>

Vous remarquerez que deux balises entourent l’inclusion du script pngfix.js.

Celle-ci ressemble étrangement à des commentaires HTML. En effet, ils en sont, cependant, cela à une signification pour les différentes versions des navigateurs Internet Explorer. Si les autres navigateurs (Firefox, Opera, …) ne prennent pas en compte le code qui se trouve entre ses deux balises, Internet Explorer SI ! On les appelle les commentaires conditionnels, et pour en savoir plus voici quelques liens : http://www.alsacreations.com/astuce/lire/48-commentaires-conditionnels.html http://www.blog-and-blues.org/articles/Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows Et voici le résultat : affichage avec pnghack.js

Résumons :

Deux cas possibles:

Dans une feuille de style css :

/* Pour Internet Explorer */
div#monDiv {
	width: 150px;
	height: 150px;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop');
}

/* Pour les autres navigateurs */
html>body #monDiv {
	filter: none;
	background: url('image.png') no-repeat
}

Les images définies dans du code HTML :

Utilisation du scipt Javascript pngfix.js, et intégration entre les balises head du code HML de la page
Pour télécharger le fichier c’est par ici : http://homepage.ntlworld.com/bobosola/pngfix.js


Sources :
Documentation officielle sur le filtre : http://msdn.microsoft.com/en-us/library/ms532920(VS.85).aspx
Créa-Web : Hack CSS – http://www.crea-web.fr/hack_css/filtre_png_transparent_sous_ie6.htm
Bobosola : Hack Javascript – http://homepage.ntlworld.com/bobosola/
PNG (Portable Network Graphics) sur Wikipedia : http://fr.wikipedia.org/wiki/Portable_Network_Graphics
Article sur la transparence du format d’image PNG : http://www.css-ig.net/transparence-format-png

Crédits images :
Tux Saint Valentin : Brunocb – http://tux.crystalxp.net/fr.id.16672-brunocb-tux-saint-valentin.html
Bleach – Demon Days : Kubo Tite – http://gallery.minitokyo.net/view/301210

Tagués avec : , , , ,
Publié dans Faites du Web, JavaScript - AJAX

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*