Etendre le support HTML5/CSS3 à IE

N’importe quel navigateur moderne de nos jour est capable de reconnaitre et d’utiliser en grande partie les propriétés CSS3 et les balise HTML 5 tous sauf notre irréductible Internet Explorer.

Nous allons voir dans cet article comment avoir le meilleur support sur les anciens navigateurs et plus particulièrement les anciennes versions d’IE.

Commençons par les balises HTML5

HTML5shiv

Html5shiv est un script JS qui permet d’étendre les balises HTML5 aux versions inférieures d’IE10.

Il suffit pour cela d’ajouter dans le head de la page le script disponible ici

Une fois cela fait il ne reste plus qu’à utiliser les nouvelles balises. Attention il est nécessaire d’utiliser un serveur. Sans une boucle localhost le script ne fonctionnera pas.

Passons au CSS.

CSS3 Pie

CSS3 Pie est une bibliothèque qui permet d’émuler des propriétés css de IE 6 – à IE 9, elle est disponible sur le site de css3pie.

Les propriétés qui peuvent être émuler sont les suivantes :

Pour ce qui est de l’utilisation, il suffit d’inclure les fichiers dans votre projet. Ensuite d’écrire votre CSS comme ceci :

La propriété behavior: url(chemin/vers/le/fichier/PIE.htc) est obligatoire.

Elle ne marche qu’avec internet explorer, elle permet d’associer un script javascript à un objet HTML.

Encore une fois cela ne marche que si l’on passe par une boucle localhost.

Petite précision importante sur cette bibliothèque, elle ne reconnait que les propriétés de type « short-hands » par exemple : border radius: 10px ou border-radius 10px 10px 10px 10px.

Mais ne reconnais pas la propriété suivante border-radius-top-left: 10px;

Selectivizr

Selectivizr est un petit script qui permet d’émuler les pseudos classes pour IE 6 à IE 8 disponible sur le site de seletivizr.

Il suffit d’inclure le script dans le head de la page :

et de posséder une bibliothèque parmi les suivantes :

  • Jquery
  • Dojo
  • Prototype
  • yahoo
  • DomAssistant
  • mootools
  • nvwmatcher

Par ailleurs pour une émulation de toutes les pseudos classes il est nécessaire d’utiliser mootools ou nvwmatcher. Les autres ne permettent qu’une émulation partielle.

Flexbox

Enfin pour rendre compatible les flexbox avec IE10 il faut doubler les propriétés css avec le préfixe -ms- à chaque fois que vos utiliser une propriété flexbox par exemple de cette façon :

Cela permet une compatibilité avec IE10.

Cependant si vous viser une compatibilité inférieur à IE10 il est possible d’utiliser le Polyfill flexibility disponible ici

Ce polyfill n’est cependant pas complet et ne supporte pas toutes les propriétés flexbox. Cela permet un mode dégradé plus sympathique mais ne vous attendez pas à un support complet.

Mes tests ce sont portés principalement sur une version IE 8 je ne sais pas si sur la version d’IE 9 le support est meilleur.

Pour l’utilisation, il suffit encore une fois d’inclure le script dans notre projet :

Ensuite il faut mettre devant chaque display: flex la propriété suivante :

Pour savoir si le navigateur utilisé supporte ou pas les flexbox il est possible d’utiliser modernizr. (voir l’article)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.