Les développeurs HTML le savent bien : impossible de faire des styles uniformes sous tous les navigateurs ! Chacun a ses particularités : chrome et ses webkit-, safari qui n’en met pas et firefox qui -moz ifie un peu tout… et IE qui ne fait rien !
La solution pour IE : PIE.htc
La solution proposée ici a été développée pour supporter le CSS 3 sur Internet Explorer. Pour ce faire, on utilise une particularité CSS de Internet Explorer pour exécuter du JavaScript, qui va recréer le style CSS 3.
Mise en place
Il suffit de rajouter une ligne CSS au style des éléments qui ont du CSS3.
- <style type="text/css">
- .rounded-corner5
- {
- -webkit-border-radius: 5px; /* Chrome */
- border-radius: 5px; /* CSS3 */
- -moz-border-radius: 5px; /* Mozilla */
- behavior: url(PIE.htc); /* Internet Explorer */
- }
- </style>
Exemple d’utilisation
Ceci est un div en exemple, avec des bords arrondis
Dépannage : quelques règles à respecter tout de même…
Il y a principalement deux problèmes qui peuvent être rencontrés :
- Mime-type : par défaut sous linux, le fichier .htc est reconnu comme étant du type text/html, mais doit être du type text/x-component pour que ça fonctionne. Plusieurs solutions, en fonction de ce que vous pouvez faire : modifier la configuration du serveur /etc/mime.types pour rajouter ce champ, rajouter la ligne
AddType text/x-component .htcà votre configuration apache ou .htaccess, ou enfin créer un fichier de script du type PHP en utilisant le codeheader('Content-type: text/x-component')pour spécifier le type contenu. - Domaine, répertoire et droits : le CSS ne va fonctionner que si le fichier .htc est sur le même domaine que le site qui sert le HTML : impossible donc d’utiliser la traditionnelle et non moins nécessaire segmentation des contenus dynamiques/statiques. Du coup, les rendu CSS3 utilisant des url() risquent d’être mal considérées si le chemin est relatif.
English version : CSS3 for Internet Explorer with PIE.htc