HTML 5 et CSS 3 sur Internet Explorer 6, 7, 8

Internet Explorer est le deuxième navigateur le plus utilisé derrière Chrome. Or les utilisateurs de Windows XP ne disposent au mieux que de IE8, la version 9 ne s’installant que sous Vista et supérieurs. IE6 et IE7 sont en voie d’extinction mais il en subsiste encore, notamment parce qu’ils sont les navigateurs installés par défaut sur XP et Vista.

En résumé il importe d’obtenir un affichage décent sous IE8, et idéalement il faudrait rester à peu près lisible sur IE7 et IE6.

Nouveaux éléments HTML 5

Une règle CSS est nécessaire pour tous les navigateurs qui ne comprennent pas HTML5 :

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
	display:block;
}

Les anciennes versions de IE demandent une chose en plus : inclure le script JavaScript html5shiv. Nous le ferons ci-dessous au moyen d’un commentaire conditionnel.

Les commentaires conditionnels

Microsoft a annoncé que IE 10 ne comprendra pas les commentaires conditionnels. Ils sont cependant opérationnels sur les versions d’Internet Explorer 6, 7 et 8 que nous ciblons. Je recommande éventuellement le tutoriel d’Alsacreations sur comment utiliser les commentaires conditionnels.

JavaScript plutôt que la méthode de Paul Irish

Parmi les bonnes pratiques périmées, mieux vaut abandonner la manière dont Paul Irish suggérait d’employer les commentaires conditionnels en 2008. Sa technique permettait de marquer l’élément html avec des classes CSS ciblant IE (un exemple ici). Mais sur ces anciens navigateurs, les éléments HTML 5 demandent de toute manière l’exécution d’un patch en JavaScript. Aussi, plutôt que de polluer le code HTML, autant le faire en JavaScript.

J’utilise pour ma part le code jQuery suivant :

jQuery.noConflict();
jQuery(document).ready(function() {
	if (jQuery.browser.msie) {
		if (jQuery.browser.version == 6)
			jQuery("html").addClass("ie6 ie67 ie678");
		if (jQuery.browser.version == 7)
			jQuery("html").addClass("ie7 ie67 ie678");
		if (jQuery.browser.version == 8 )
			jQuery("html").addClass("ie8 ie678");
	}
});

Ce code est à placer dans une ressource JavaScript nommée chez moi ie678-patch.js. À l’instar de html5shiv, on inclut cette dernière dans le code HTML via un commentaire conditionnel.

Le commentaire conditionnel pour IE 6, 7 et 8

Ce commentaire est à inclure dans l’élément HTML head :

<!--[if lte IE 8]>
<script src="html5shiv.js"></script>
<script src="jquery.js"></script>
<script src="ie678-patch.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="ie678-patch.css" />
<![endif]-->

NB. En fait pour ma part j’ai intégré le contenu de html5shiv.js dans ie678-patch.js. J’utilise jQuery en version 1.3.2, suffisant et moins volumineux pour notre patch. Puisque j’inclus également une version à jour de la bibliothèque jQuery en fin de code HTML pour le reste des besoins du site, cela signifie que les vieux IE exécutent (sans problème notable) deux versions de jQuery.

CSS 3 sur IE 6, 7 et 8

Une règle à suivre : ne pas polluer son code CSS avec des patchs spécifiques aux vieux navigateurs. Je suggère de dupliquer les règles CSS concernées dans un fichier CSS dédié (nommé chez moi ie678-patch.css et inclus via un commentaire conditionnel) afin d’y ajouter ces patchs.

CSS3 PIE est un patch JavaScript à inclure à l’intérieur même des règles CSS. Il fait fonctionner les styles border-radius, box-shadow, linear-gradient, les background multiples et border-image. Une bonne notice d’utilisation se trouve sur Alsacreations. Je n’ai pas noté de dégradation notable des performances d’affichage avec CSS3 PIE.

Notons que CSS3 PIE est aussi utile sur IE9 pour border-image et linear-gradient.

CSS 3 media queries sur IE 6, 7 et 8

Il existe des patchs JavaScript qui font comprendre les media queries aux anciens IE. Mais ils rendent l’affichage de la page trop lent. Aussi je n’en utilise aucun, je me contente de recopier dans « ie678-patch.css » les règles CSS contenues dans les média queries afin d’obtenir les affichages suivants :

  • Pour IE6 et IE7, viser un affichage pour écran en 800×600.
  • Pour IE8, viser un affichage pour écran en 1024×768.

En effet, IE 6 et 7 tournent le plus souvent sur de vieilles machines mal configurées avec de vieux écrans pourris.

IE8 est un peu plus moderne alors dédions-lui la très classique résolution des écrans moyens.

Positionnement en CSS 2.1 sur IE 6 et 7

Toujours dans le fichier « ie678-patch.css », le positionnement en CSS par inline-block et par layouts de tables sont à corriger ainsi pour IE 6 et 7 :

/* IE6, IE7 - display: inline-block */

.ie67 .my-inline-block-element {
	display: inline;
	zoom: 1;
}

/* IE6, IE7 - display: table */

.ie67 .my-table-or-row-element {
	display: block;
}

.ie67 .my-cell-element {
	display: inline;
	zoom: 1;
}

Notons que nous utilisons ici le marqueur CSS .ie67 ajouté plus haut par notre patch JavaScript « ie678-patch.js ».

Tester sur IE 6, 7 et 8

Pour tester un site sur les anciennes versions de IE, les “compatibility mode” de IE sont à éviter. La seule manière vraiment fiable de tester est d’utiliser une machine virtuelle pour chaque version de IE. Les curieux liront ici la source de cette affirmation.

J’utilise pour ma part une seule machine virtuelle avec Windows XP et IE Collection. IE Collection installe plusieurs versions standalone de Internet Explorer. Ça n’est pas très stable et c’est, en outre, imparfait, car les différents IE partagent nécessairement certaines DLL. Malgré tout, avoir les trois sur une seule VM fait gagner du temps et sur des projets modestes cela est largement suffisant.

Leave a Reply

Your email address will not be published. Required fields are marked *

Mesure anti-spam. Merci de copier le code « ddvPC2 » dans le champ ci-dessous :