Vous venez de développer, ou bien d’acheter un theme WordPress Premium et vous venez de le mettre en ligne. Et maintenant il s’agit de tester les dernières fonctionnalitées en CCS3 de votre template sur les différents navigateurs. Sauf exceptions, sur Firefox, Chrome, Safari ou Opéra, et même Internet Explorer 9, tout fonctionne.
Mais il reste cette version d’Internet Explorer, la version 8 qui ne connait pas le CSS3, puisqu’à l’époque le Css3 n’existait pas quand il était sorti. Vous avez alors deux solutions, soit ne pas chercher la compatibilité avec cette vielle version qui traine encore sur des Windows XP, ou bien trouver une solution de remplacement.
Une solution pour le CSS 3 avec Internet Explorer 8 pour votre WordPress
Il existe Pie.htc
qui est un fichier javascript qui se charge de cette compatibilité avec les propriétées Css 3 suivantes :
border-radius, box-shadow, border-image, les background en Css3, la transparence des images Png, et d’autres fonctions.
Utilisez la dernière version 1 qui est stable. J’ai cherché à tester la version 2 beta 1, mais celle ci a provoqué plus de problêmes qu’autre chose.
Si l’on suit la procédure d’installation préconisée qui est la règle en Css à appliquer aux classes pour IE8 :
behavior: url(path/to/pie_files/PIE.htc);
Information tirée de la documentation :
Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.
Ce qui signifie que l’on doit utiliser une chemin relatif vers le fichier PIE.htc.
hé bien sur WordPress , cela ne fonctionne pas.
La solution PIE htc sur WordPress
Vous pouvez si vous le souhaitez, utiliser une feuille de style à part à inclure dans votre fichier header.php
<!--[if lte IE 8]>
<link rel='stylesheet' id='ie8' href='<?php echo get_template_directory_uri(); ?>/css/ie8.css' type='text/css' media='all' />
<![endif]-->
Elle consiste à mettre le chemin absolu vers le fichier PIE.htc pour que tout fonctionne.
votre_classe_sous_IE {
behavior: url(http://www.votre-domaine.com/PIE.htc);
}
Les bugs possibles
Votre hébergement ne reconnait pas le bon content-type pour les fichiers .htc :
- Vous pouvez ajouter cette regle : AddType text/x-component .htc dans votre fichier .htaccess
- Vous pouvez utiliser le fichier PIE.php à la place du fichier PIE.htc. Ce fichier est à mettre au même endroit sur votre site.
- Vous pouvez utiliser en dernier cas le fichier PIE.js. Dans ce cas vous perdez toutes les fonctions du chargement asynchrone du fichier PIE.htc. Vous devrez activer chaque classe en javascript suivant la documentation.
Les propriétés des classes
Si vous utilisez une propriété comme celle ci :
votre_classe_sous_IE {
border-top-right-radius: 20px;
behavior: url(http://www.votre-domaine.com/PIE.htc);
}
cela ne fonctionnera pas, utilisez une propriété raccourcie :
votre_classe_sous_IE {
border-radius: 20px 0px 0px 0px;
behavior: url(http://www.votre-domaine.com/PIE.htc);
}
Pour Internet Explorer 9
Il se peut que Internet Explorer implémente quand même PIE.htc, et cela risque de provoquer des erreurs d’affichage et autres bugs plus ou moins agréables.
Il vous suffit alors de surcharger les classes pour Internet Explorer 8 dans un fichier css externe, et le charger uniquement pour lui, comme au début de ce billet.
Les plugins
Evidemment, sur WordPress, il existe un plugin presque pour tout. Pour pie.htc aussi. Mais celui-ci ne se charge que d’ajouter les quelques lignes de code sur votre fichier header.php, alors si vous avez envie de mettre les pattes dans le code, je vous le conseille…
Modération subjective.