CSS3Pie : Rendre compatible du CSS3 pour IE6 à 9

Salut à tous.

Cela fait un petit moment que je n’avais pas fait d’article. Aujourd’hui je vais vous parler d’un petit outil que j’utilise sur chaque projet : CSS3Pie.

 

Qu’est-ce que CSS3Pie ?

CSS3Pie, c’est tout simplement un petit fichier qui va vous permettre de rendre compatible certaines fonctionnalités de CSS3 sous IE6 à IE9. Ce petit fichier comporte une extension .htc. Les fichiers de type htc ne sont pris en charge que sous Internet Explorer. Ce qui veux dire que les autres navigateurs ne tiendront pas compte de ce fichier et donc ne le chargeront pas.

 

Comment cela fonctionne-t’il ?

En réalité, c’est très simple. Ce fichier PIE.htc doit être appelé dans votre feuille de style. Pour ma part, je place le fichier PIE.htc dans mon répertoire lib. Ensuite, pour vous rendre la tâche plus facile, le site CSS3Pie a mis à disposition un générateur CSS3 spécialement dédié pour les fonctionnalités de cet outil.

Dans l’utilisation du générateur, n’oubliez pas de cocher les 2 cases du bas dans la partie Options (Enable PIE (only affects IE) et Show CSS). Ensuite dans votre CSS, n’oubliez pas de mettre ces lignes :

behavior: url(lib/PIE.htc);
z-index: 0;
position:relative;

 Petite explication : La première ligne est là pour appeler notre fichier PIE. Les 2 autres lignes ne sont pas mentionnées dans la doc mais j’ai été confronté il y a de cela un petit moment à un souci de code avec IE8 (désolé impossible de m’en rappeler…) et en cherchant sur le net, la solution était d’ajouter ces 2 lignes. Bien entendu ces 2 lignes ne sont pas obligatoire et le but n’est pas d’ajouter du code superflu mais gardez en mémoire que IE8 est assez capricieux et que la solution peut être avec ces 2 lignes. Je sais c’est un peu léger comme explication mais si je ne l’avais pas écrit, je m’en serais voulu :P

 

Des limites à son utilisation ?

Et oui, chaque outil à ses limites. Et malheureusement celui-là n’échappe pas à cette règle. CSS3Pie propose plusieurs fonctionnalités CSS3 pour IE :

Mais voilà, malheureusement un text-shadow ne sera pas présent. Les animations non plus. Bref cet outil est limité je vous l’accorde. Cependant, dans la plupart de mes projets, les propriétés box-shadow ou border-radius sont celles que j’utilise assez régulièrement.

 

En conclusion, cet outil mérite quand même qu’on se penche dessus. Comme je l’ai dit, je l’utilise assez régulièrement. Effectivement, il manque certaines propriétés CSS3 mais d’un autre côté, pourquoi utiliser une usine à gaz si ce n’est pour utiliser que 10 % des fonctionnalités ? Et surtout qui dit moins de fonctionnalité dit plus léger ;)

 Lien : http://css3pie.com/

A très bientôt et n’hésitez pas à me laisser des commentaires :)

Tef