page-translate

CSS3 PIE : This cake is not a lie !

border-radius / CSS3 / CSS3 Pie / IE / Web

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

Dans un précédent article nous avons abordé la compatibilité des différents navigateurs vis-à-vis du HTML 5 et de CSS 3. La conclusion qui en découlait était que l'on pouvait utiliser ces langages sur des navigateurs récents, mais que les versions d'Internet Explorer antérieures à la 9 posaient problème. Nous avons cité quelques outils offrant une alternative comme html5.js ou encore selectivizr.

Dans le cas du CSS3 il existe un projet permettant de faire fonctionner les propriétés les plus communes sur les anciennes versions d'IE.
Ce projet se nomme CSS3 PIE.

 

Il est à quoi ce gâteau ?

PIE signifie Progressive Internet Explorer, ce qui veut dire que ce projet vise uniquement à adapter le CSS3 au navigateur de microsoft. Les versions visées vont de la 6 jusqu'à la 9.

À l'heure actuelle ce projet est toujours en beta et ne supporte que certaines propriétés comme border-radius, box-shadow, border-image, multiple background images et linear-gradient. Pour l'instant ce n'est pas grand chose mais ce sont probablement les propriétés de CSS3 les plus utilisées. De plus le développeur du projet travail activement et son site est vraiment très complet et documenté. On notera la possibilité de faire des gradient patterns qui, malheureusement, ne fonctionnent que sous la version 9 d'IE.

 

Pourrais-je en avoir une part s'il vous plait ?

Pour se procurer CSS3 PIE c'est très simple : il vous suffit de le télécharger sur le site officiel de CSS3 PIE. Par la suite, en dézipant le dossier téléchargé vous vous retrouverez avec plusieurs fichiers, celui qui nous intéresse est le PIE.htc. Téléchargez ce fichier sur votre serveur (peu importe de l'endroit du moment que vous vous en souvenez ...) et voilà ! C'est installé !

Une petite précision sur les fichiers .htc : il s'agit de fichiers de comportement utilisés par Internet Explorer. Ces fichiers contiennent du code javascript qui peut être appelé dans du style CSS grâce à la propriété "behavior" permettant, dans le cas de CSS3 PIE, de simuler les propriétés de CSS3.

 

Excusez-moi. Comment je mange ça ?

Pour utiliser CSS3 PIE c'est aussi simple que pour l'installation. Si, par exemple, on veut ajouter un border radius de 3px sur un élément, de base on écrit :

.mon-element{
  -moz-border-radius : 3px;
  -webkit-border-radius : 3px;
  border-radius : 3px;
}

Code qui fonctionnera sur les navigateurs récents ou IE9. Si vous voulez que cela fonctionne sous IE 6, 7 ou 8 vous ajouterez juste une ligne au code précédent :
behavior : url(chemin/vers/PIE.htc);
Et... c'est tout ! Si je vous assure ! C'est aussi simple que ça. Bon il y a une petite subtilité tout de même : le chemin que vous devez entrer est lié au fichier HTML et non au fichier CSS.

Une autre propriété du CSS3 est le linear gradient. Dans ce cas vous devez ajouter une ligne supplémentaire par rapport à celle du dessus :

.mon-element{
   background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
   background: -webkit-linear-gradient(#EEFF99, #66EE33);
   background: -moz-linear-gradient(#EEFF99, #66EE33);
   <span style="color: #ff0000;">-pie-background: linear-gradient(#EEFF99, #66EE33);</span>
   behavior: url(/PIE.htc);
 }

Et c'est à peu près tout ce qu'il faut savoir pour utiliser CSS3 PIE.

 

J'en reprendrais bien un morceau.

Bien sûr ce projet n'est pas encore abouti, vu que toujours en phase beta, et donc des problèmes existent et sont connus par l'auteur du projet, Jason Johnston, qui les répertories sur son site que je vous invite grandement à consulter. En tout cas ce projet est une des solutions les plus prometteuses pour pallier aux problèmes Internet Explorer.

Ajouter un commentaire

CAPTCHA
Êtes-vous un robot ?
Image CAPTCHA
Écrivez le code apparaissant dans l'image.

Derniers articles