Adapter son site pour Internet Explorer

1 août 2009 | Catégorie: CSS

Introduction

Il est souvent difficile de rendre un design compatible sur tous les navigateurs, surtout sur IE 6 et ses versions antérieurs. Heureusement, il existe des astuces pour appliquer des "patchs" à Internet Explorer. On utilise souvent des commentaires conditionnels ou alors des hacks CSS pour adapter les feuilles de style au moteur de rendu du navigateur.

Les commentaires conditionnels pour IE

Les commentaires conditionnels sont des commentaires (X)HTML standards ayant une syntaxe particulière. Ils ne sont interprétés que par Internet Explorer ou une version ciblée de ce dernier, les autres navigateurs les interprètent comme de simples commentaires. Bien entendu ils peuvent être aussi bien mis dans la balise <body> que dans la balise <head>

Syntaxe pour viser toutes les versions d'IE

<!--[if IE]>
	Code HTML interprété par IE
<![endif]-->

Syntaxe pour viser une ou plusieurs versions d'IE

<!--[if comparaison IE version]>
	Code HTML interprété par une ou plusieurs versions d'IE
<![endif]-->

La comparaison peut prendre les valeurs suivantes :

  • gt pour >
  • gte pour ≥
  • lt pour <
  • lte pour ≤
  • aucune valeur n'est requise pour le signe égal
  • ! pour prendre en compte toutes les versions d'IE sauf celle indiquée

Les commentaires conditionnels sont compris par Internet Explorer depuis IE 5.0.

La version du navigateur peut prendre les valeurs suivantes :

  • 5.0
  • 5.5000
  • 6
  • 7
  • 8
  • etc

Exemple: 

<!-- Pour IE 6 uniquement -->
<!--[if IE 6]>
	<link href="/ie6.css" rel="stylesheet" media="screen" type="text/css" />
<![endif]-->

<!-- Pour IE 5 et IE 5.5 -->
<!--[if lt IE 6]>
	<script type="text/javascript">alert('Merci de mettre a jour votre navigateur!');
	document.location.href='http://fr.www.mozilla.com/fr/?flang=fr';</script>
<![endif]-->

<!-- Pour IE plus grand ou égale à 7 -->
<!--[if gte IE 7]>
	<link href="/ie_superieur_egale_a_7.css" rel="stylesheet" media="screen" type="text/css" />
<![endif]-->

Astuce bonus

Nous avons vu comment montrer du code HTML à IE mais nous n'avons pas vu comment le lui cacher.

<!--[if !IE]>-->
	<style type="text/css">
	p:first-letter {
		font-weight:bold;
	}
	</style>
<!--<![endif]-->

Vous remarquerez que la syntaxe change légèrement. Le code HTML n'est plus dans un commentaire.

Hacks CSS

Personnellement je vous déconseille l'utilisation des hacks pour plusieurs raisons :

  • Leur syntaxe est souvent "tirée par les cheveux"
  • Certains ne sont pas valides W3C
  • Il est plus propre de mettre les correctifs pour les versions d'IE concernés dans des feuilles de style à part

Si toutefois vous en avez besoin, je vous conseille d'aller voir ce tableau qui répertorie la plupart des hacks CSS.

Comment rendre ses PNG transparents sur IE6

Le format d'image (.png) est de plus en plus répandu sur le web. Le problème étant que IE6 ne gère pas la transparence de ce dernier, à la place vous avez droit à un beau fond gris. Toutefois des astuces en JavaScript existent.

Tester un design sur les anciennes versions de IE

Pour vérifier que votre site soit compatible sur les anciennes versions d'Internet Explorer je vous recommande IE Tester.

Pour ceux qui n'ont pas Windows, je leur conseille netrenderer ou encore browsershot.org. Ils prennent des screenshots de votre sites et vous les renvoient. Si cette solution ne vous convient pas il y'a toujours la virtualisation ou l'émulation.

Soyez le premier à laisser un commentaire !

Laissez un commentaire