Comment programmer en HTML 5 dans Internet Explorer

Récemment j’ai découvert qu’il y a quelque chose que je hais encore plus que toutes mes ex-copines réunies ensembles… Internet Explorer! Ça fait longtemps que je hais Internet Explorer mais avec l’arrivée d’HTML 5 je m’attendais au pire. Comment développer des sites en HTML 5 et CSS 3 malgré le manque de support? Et bien, étonnamment, c’est plus facile que l’on peut le croire!

J’ai dit facile? Oui… C’est bien ce que j’ai dit! Voici comment y arriver :

Programmez votre site en HTML 5 et CSS 3

Laissez aller tous vos talents d’élite magicien du web et amusez -vous! Programmez pour un navigateur qui supporte HTML 5.

Activez le support du HTML 5

Avec un petit code JavaScript vous pouvez créer les éléments en mémoire qui ne sont pas normalement reçus comme du HTML.

Vous pouvez ajouter tous les éléments HTML dont vous avez besoin.

Spécifiez l’affichage des éléments CSS

Internet Explorer ne possède aucune règle d’affichage pour les nouveaux éléments. Les éléments seront donc affichés en ligne (inline). Il faut donc spécifier dans une feuille de style le comportement de ces éléments.

hgroup, article, header, footer, section, nav { display: block }

Activez CSS 3 sur les éléments

Vous pouvez activer des fonctions CSS 3 dans Internet Explorer (9 à 6) grâce à des scripts VML (Vector Markup Language). Mon script préféré est CSS3 Pie. Présentement il ne supporte que les fonctionnalités les plus populaires mais cela convient dans la plupart des cas.

Téléchargez le fichier PIE.htc et placez-le à la racine du domaine. J’ai bien dit à la racine du domaine. Une fois de plus Internet Explorer ne respecte pas les standards et les chemins CSS ne sont pas interprétés de la même manière que dans IE 8-6. Je vous conseille aussi de placer le fichier dans le répertoire racine du site en développement. Lors de la mise en ligne vous n’aurez pas besoin d’y réfléchir.

Vous devez ensuite spécifier quels éléments doivent utiliser le script VML. Le script doit s’exécuter sur chaque élément donc placez-le seulement où vous en avez besoin.

element_avec_du_css3 {
	behavior: url(/PIE.htc);
}

CSS3 PIE ne supporte pas le text-shadow mais vous pouvez utiliser les filtres d’IE pour reproduire un effet similaire.

text_avec_ombrage {
	filter: glow(color=black,strength=2);
}

Astuces pour déboguer IE 8 à 6

Ces astuces devraient vous permettre de rendre votre site fonctionnel sous Internet Explorer en moins de deux heures. Il est important de garder en tête que le site sera visuellement différent sous les vieilles versions et que vous ne pouvez rien y faire.

Testez les versions d’Internet Explorer
IETester est un navigateur qui permet de visualiser votre site sous Internet Explorer 9 à 5. J’ai effectué des tests comparatifs avec les navigateurs originaux et je n’ai vu aucune différence.

Créez des feuilles de styles pour Internet Explorer
Je vous conseille de créer des feuilles de styles propriétaire à Internet Explorer afin de régler les problèmes d’affichages.

CSS : bordure des images
Internet Explorer est le seul navigateur qui entoure les images qui se trouvent dans une balise de navigation. Ajoutez ce CSS à votre feuille de style IE seulement afin de régler le problème.

img { border: 0 none }

CSS : inline-block
Internet Explorer 7 et 6 ne permettent pas d’utiliser la valeur inline-block. Cette valeur est souvent utilisée en CSS 3 pour aligner des éléments ensemble, comme dans un menu horizontal. Vous devez remplacer les valeurs par inline.

Voici un exemple :

element_de_menu { /* CSS 3 */
	display: inline-block;
}

element_de_menu { /* Internet Explorer */
	display: inline;
}

CSS : tailles et inherit (IE 6 seulement)
Internet Explorer 6 ne traite pas correctement les valeurs inherit et les tailles des objets. IE ignore tout simplement les valeurs inherit donc vous devez les spécifier pour chaque élément. Pour la taille des éléments elle est interprétée différemment donc vous devrez en spécifier d’autres.