Les CSS dans leur troisième version apportent tout un lot de propriétés qui font gagner énormément de temps à l'intégration de design. Parmi celles-ci, on retrouve border-radius, permettant d'arrondir les angles des boites, linear-gradient qui ajoute un dégradé en tant que fond d'un élément, ou box-shadow qui lui applique une ombre. Toutes ces propriétés permettent de rationnaliser ces différents effet qu'on bidouillait auparavant à l'aide de div et de span imbriqués avec des morceaux d'images de fond pour simuler une ombre ou un coin arrondi. On gagne donc à la fois en productivité, mais aussi en bande passante et on obtient un rendu graphique forcément plus optimisé.

C'est bien beau tout ça mais… Bien évidemment, Internet Explorer ne gère pas ces propriété. IE8 gère encore difficilement enfin les CSS 2, alors lui demander des choses si compliquées, faut pas pousser. On peut espérer que IE 9, qui doit sortir dans quelques mois, saura les interpréter correctement, sans bug, ni hack… Mais même dans ces conditions, les précédentes versions de IE resteront encore quelques années beaucoup trop implémentés (IE6, 10 ans, est toujours utilisé par 10% des clients web, c'est énorme !) Alors que faire ?? On oublie ces CSS 3 et on continue à galérer comme avant ? Ou alors on utilise des outils supplémentaires comme http://css3pie.com !

CSS3Pie

CSS3 Pie est un framework qui se permet d'ajouter à IE 6, 7 et 8 la gestion des propriétés border-radius, box-shadow, border-image, linear-gradient, et une presque gestion des valeurs en rgba (déclaration de couleur en RGB avec une valeur d'opacitié). Il suffit donc d'appliquer cet outil pour que, magiquement, nos CSS 3 fonctionnent sous IE ! C'est énorme !

Sur le dernier projet de JFG Networks sur lequel je travaille et dont je parlerais longuement incessamment sous peu, j'ai décidé d'aller de l'avant et d'utiliser les technologies web les plus avancées, dont CSS 3. IE ne serait supporté que dans sa version 8, je pouvais donc me le permettre. Les conséquences se limiteraient à un design légèrement plus carré sous IE : là où les autres navigateurs afficheraient des coins arrondis, IE les laisseraient désespérément carrés. Puis j'ai découvert CSS3Pie et j'ai été ravi de pouvoir fournir une expérience utilisateur identique sur tous les browsers.

Comment ça marche ???

CSS3Pie consiste en un fichier PIE.htc qui n'a absolument rien à voir avec un mauvais constructeur de smartphone taïwannais. Il s'agit d'une sorte de javascript qui sera exécuté sur les balises xhtml auquelles il est appliqué. C'est grâce à ça que les propriétés inconnues de IE sont simulée en JS.

Par exemple, pour appliquer une bordure arrondie aux éléments de classe ".rounded", nous utiliserons cette déclaration CSS :

  1. .rounded {
  2. 	-moz-border-radius: 5px; /* FF1+ */
  3. 	-webkit-border-radius: 5px; /* Saf3+, Chrome */
  4. 	-khtml-border-radius: 5px; /* Konqueror */
  5. 	border-radius: 5px; /* Standard. IE9 */
  6. 	behavior: url(path/to/PIE.htc);
  7. }
  • Les trois premières lignes (-moz, -webkit, -khtml) n'ont rien à voir avec css3pie et sont les noms des propriétés propriétaires et temporaires utilisées par les navigateurs qui n'appliquent pas la spécification CSS3 tant qu'elle n'a pas été finalisée.
  • border-radius est la vraie propriété css.
  • behavior est une propriété de Internet Explorer qui permet d'appliquer un fichier htc à ces élements. PIE.htc va donc lire les propriétés de l'élément en question et simuler les rendus que IE ne connais pas grâce à javascript.

Ça a l'air plutôt pas mal tout ça hein ! Mais pourtant… :(

Pourtant ???

Malheureusement beaucoup trop de contraintes m'ont empêché d'utiliser cet outil très tentant. Forcé de laisser mon design carré aux utilisateurs d'IE, voici les points qui m'ont embêté, voire bloqué :

  • Pour éviter de répéter du code un peu partout, j'ai d'abord tenté de mettre mon behavior: url(path/to/PIE.htc); sur *, puis sur body, mais aussi sur un selecteur existant qui contenait un border-radius : 
    1. bla {
    2. 	behavior: url(path/to/PIE.htc);
    3. }
    4. body {
    5. 	behavior: url(path/to/PIE.htc);
    6. }
    7. .maclasse *:first-child {
    8. 	behavior: url(path/to/PIE.htc);
    9. }
    Erreur fatale ! Internet Explorer n'a pas supporté la charge de travail que ça lui a demandé. En effet, après avoir compris comment fonctionnait cette propriété, on en déduit que le script contenu dans le .htc s'exécute indépendamment pour chacune des balises contenant la page, soit quelques centaines, ou peut être milliers selon la complexité de la page… IE a freezé. Conclusion : ne jamais placer de behavior dans un selecteur contenant une astérisque ou une sélection trop groumande.
  • Le path vers le fichier PIE.htc doit absolument être relatif non pas à la css, comme pour une image de background, mais à la page web courante. Ça pose pas mal de problème quand on développe dans un environnement différent de la production : en effet, en dev, le fichier pourrait être sur /css/PIE.htc, tandis qu'en prod, il sera probablement sur un serveur statique : http://static.mondomaine.com/PIE.htc. C'était la raison pour laquelle je souhaitais rationnaliser la présence de ce behavior dans le sélecteur * pour n'avoir qu'une seule modification à appliquer lors d'une mise en production du code de l'application.
  • Dans certains cas, lorsque un ''border-radius'' est appliqué à l'aide de __css3pie__, les images de fond (''background-image'') de l'élément disparaissent. Et c'est ce point là qui a été le plus bloquant pour moi. À choisir entre des coins carrés au lieu de rond ou des coins ronds, mais un design tout blanc… j'ai laissé tomber les ronds…
  • CSS3Pie reconnait très bien ''border-radius'', mais pas du tout ses sous propriétés ''border-bottom-left-radius'', ''border-top-right-radius'', etc. Rien de très grave, certes, mais il faut penser dès le début à n'utiliser que ''border-radius: topleft topright bottomright bottomleft;'' pour ne pas perdre du temps à tout corriger.
  • Après on peut aussi râler sur le fait d'utiliser une propriété propriétaire qui ne fonctionne que par et pour Microsoft… mais la fin justifie malheureusement les moyens…

Conclusion

Vivement IE9. Sortie de la beta prévue mi septembre pour tous les experts qui sont à l'aise avec le téléchargement et l'installation de logiciels. CSS3Pie peut quand même dépanner pour des sites peu complexes, mais n'est pas encore digne d'être recommandé dans toute les situations.