En finir avec les hacks css

1 commentaire

Par Seb

Pour tout webdesigner qui se respecte, rendre son site compatible avec Internet Explorer reste un passage obligé, aussi douloureux soit-il. Et on peut jurer et proférer toutes les malédictions possibles et imaginables, mais cette famille de navigateur reste tout de même majoritaire auprès du grand public : IE6 représente toujours 25% des navigateurs en entreprise…

Du coup, on voit fleurir de nombreux hacks CSS pour cibler Internet Explorer et ses différentes versions, mais cela n’est pas la panacée dans la mesure où :

  • ils sont difficiles à retenir, et difficilement lisibles
  • la compatibilité de ces hacks avec des mises à jour futures de ces navigateurs n’est pas assurée

Pour éviter d’en passer par là, une méthode simple existe : les blocs conditionnels.

Cibler Internet Explorer et ses différentes versions

Pour l’utiliser, on englobe l’ensemble des pages dans des blocs conditionnels, c’est-à-dire des blocs qui ne seront vus que par Internet Explorer :

<body>
<!--[if IE]><div class="ie"><![endif]-->

	(contenu de votre page)

<!--[if IE]></div><![endif]-->
</body>

Dès lors, il devient possible directement dans votre feuille de style principale de cibler Internet explorer, simplement en préfixant vos sélecteurs avec .ie :

.style {
	// Style pour tous les navigateurs
	}
	.ie .style {
		// Style uniquement pour IE
	}

Le principe est le même que celui des hacks CSS, mais avec la garantie que cela fonctionnera dans le temps, et c’est autrement plus lisible dans le code, non ?

Il est possible de cibler plus précisément certaines versions d’IE :

<body>
<!--[if IE]><div class="ie"><![endif]-->
<!--[if lt IE 8]><div class="ie7"><![endif]-->
<!--[if lt IE 7]><div class="ie6"><![endif]-->

	(contenu de votre page)

<!--[if lt IE 7]></div><![endif]-->
<!--[if IE 7]></div><![endif]-->
<!--[if IE]></div><![endif]-->
</body>

De cette manière, on dispose de la granularité suivante :

.style {
	// Style pour tous les navigateurs
	}
	.ie .style {
		// Style pour toutes les versions d'IE
	}
	.ie7 .style {
		// Style uniquement pour les versions d'IE 7 et 6
	}
	.ie6 .style {
		// Style uniquement pour la version 6 d'IE
	}

Et les PNG ?

L’autre gros point noir d’Internet Explorer 6, c’est sa gestion plus que rudimentaire des PNG : la transparence n’est pas supportée, ce qui limite de beaucoup les possibilités.

La première technique (et la plus simple) consiste à utiliser un filtre spécifique à IE pour gérer ces PNG lorsqu’ils sont utilisés en arrière-plan :

.style {
	background-image: url('mon-image.png');
	}
	.ie6 .style {
		// Style uniquement pour la version 6 d'IE
		background: transparent;
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/mon-image.png', sizingMethod='scale');
	}

Attention cependant à bien préciser le chemin vers votre image à partir de votre page web finale, et non de la feuille de style (comme pour une propriété normale).

Vous pouvez utiliser plusieurs valeurs pour la propriété sizingMethod :

crop
Coupe l’image pour la faire rentrer dans le bloc
scale
Étire l’image pour remplir tout l’espace du bloc

Cette méthode a cependant deux inconvénients :

  • Les balises <img> ne sont pas gérées
  • il n’est pas possible d’utiliser les propriétés css background-position et background-repeat

Pour contourner ces problèmes, il existe une deuxième solution autrement plus efficace, même si elle est un peu plus lourde à mettre en place : la librairie javascript DD_belatedPNG. Téléchargez le fichier .js, insérez-le dans votre page et ciblez tous les éléments à traiter (en utilisant les mêmes sélecteurs CSS que dans vos feuilles de style), le script s’occupe de tout.

Exemple de code à insérer dans votre balise <head> :

<!--[if lt IE 7]><script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script><![endif]-->
<!--[if lt IE 7]><script type="text/javascript">

	// Ciblage d'un élément particulier
	DD_belatedPNG.fix('#id');

	// Ciblage d'une classe
	DD_belatedPNG.fix('.style');

	// Ciblage de plusieurs éléments simultanément
	DD_belatedPNG.fix('#id, .style, .autre-style');

</script><![endif]-->

Vous pouvez cibler aussi bien une image qu’un style css, et toutes les propriétés CSS (background-position et background-repeat notamment) sont gérées.

Avec tous ces éléments en poche, rendre votre site compatible avec Internet Explorer n’est finalement plus si compliqué que ça !


Un commentaire


Exprimez vous !


(Ne sera pas publié)

Sur ThemeForest

  • Constellation complete admin skin
  • Blue Earth
  • Blue Earth Wordpress theme