CSS3Pie, styles CSS3 pour Internet Explorer

Tutorielcss

Publié par jojaba le 17 Octobre 2011, mis à jour le 25 Janvier 2017 (85825 lectures)

CSS3 pointe son nez apportant son lot de propriétés de mise en forme très pratiques. Certaines fonctionnalités de CSS3 ont aujourd’hui un bon support dans les versions récentes des navigateurs (Firefox, Chrome, Safari, Opera… mais aussi Internet Explorer 9 et le futur IE10), mais bien entendu pas dans les anciennes versions d’Internet Explorer qui restent très présentes sur le marché. Comment gérer cette situation? Le script CSS3 PIE, qui permet d’imiter le support de certaines propriétés CSS3 dans les anciennes versions d’Internet Explorer, est un début de solution.

Dans l'astuce « Utiliser CSS3 aujourd'hui, outils et ressources » sont proposés un certain nombre d'outils permettant de pallier le manque de compatibilité des anciennes versions d'Internet Explorer avec les standards CSS3. Parmi ceux-là, il fait mention de CSS3 Pie.

Qu'est-ce que CSS3 Pie ?

CSS3 Pie a pour but de rendre quelques styles CSS3 compatibles avec les versions 6, 7, 8 et 9 d'Internet Explorer.
Comment ? En utilisant :

un simple fichier *.htc
une propriété css behavior.

Un fichier *.htc ? Oui, ce type de fichier n'est pas très courant, cela mérite une petite explication. Les composants HTC contiennent du code Javascript spécifiquement utilisé par Internet Explorer en utilisant la propriété behavior dans les feuilles de style. Ce code Javascript simule les styles CSS 3 non pris en charge. De fait, c'est un procédé non standard, mais il est suffisamment pratique pour ne pas être ignoré, voire être étudié. Pour ceux qui veulent en connaître davantage sur le principe de fonctionnement du couple fichier *.htc/propriété behavior, le plus simple est d'aller visiter la page traitant de la propriété behavior sur le site MSDN de microsoft (en anglais) : Introduction to DHTML Behaviors…

En pratique, voici ce qu'il suffit de faire. Prenons comme exemple le code suivant qui défini des coins arrondis dans la plupart des navigateurs modernes à l'élément dont l'id est monElement :

#monElement {
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

Eh bien, il suffira d'ajouter une ligne à ce code pour que les coins arrondis soient également affichés par IE :

#monElement {
  -moz-border-radius: 1em;
  -webkit-border-radius: 1em;
  border-radius: 1em;
  behavior: url(chemin/PIE.htc);
}

Petite remarque (que vous allez lire à plusieurs reprises dans ce tutoriel) quant au chemin vers le fichier PIE.htc : il est défini par rapport au fichier HTML et non par rapport au fichier CSS

Bien entendu toutes les propriétés CSS3 ne sont pas prises en charge…

Styles pris en charge

Les styles pouvant être rendus compatibles à IE 6 à 9, au moment où ce tutoriel a été écrit, sont les suivants :

Coins arrondis
Ombres portées des boîtes
Image de bordure
Plusieurs images d'arrière-plan
Dégradé linéaire sous forme d'image de fond

La prise en charge de la propriété permettant de définir une image de bordure ne sera pas développée dans ce tutoriel.

Comment faire fonctionner CSS3 Pie ?

La mise en place est vraiment simplissime. Vous déposez les fichiers PIE.htc et PIE.php contenus dans l'archive de téléchargement de CSS3 Pie à un endroit de votre hébergement Web. En principe, on n'a pas besoin de placer le fichier PIE.php, mais il est préférable de le faire pour être sûr que le content-type "text/x-component" soit bien envoyé par le header (cela dépend de la configuration du serveur). Si cela n'était pas le cas, le fichier *.htc serait purement et simplement ignoré par IE. La propriété behavior dans la feuille de style, au lieu de pointer directement vers le fichier PIE.htc, devra donc pointer vers le fichier PIE.php qui enverra le bon content-type avant de lancer le fichier PIE.htc.

Tout est à présent prêt pour fonctionner. Pour les cas simples, il va falloir ajouter la propriété behavior: url (chemin/vers/le/fichier/PIE.php) aux propriétés CSS3 d'un élément. Attention, le chemin doit être relatif au fichier HTML et non à la CSS ! Des propriétés supplémentaires seront nécessaires pour d'autres cas, mais voyons plutôt cela en détail, propriété par propriété…

Coins arrondis (propriété `border-radius`)

IE 9 et supérieurs prennent en charge les coins arrondis de manière native. CSS3 Pie agit donc ici uniquement pour IE 6 à 8.

C'est un cas simple, voici un exemple. Les propriétés CSS3 fonctionnant sur la majorité des navigateurs modernes :

#coinsArrondis {
  -moz-border-radius: 8px 0 8px 0;
  -webkit-border-radius: 8px 0 8px 0;
  border-radius: 8px 0 8px 0;
}

Pour que cela fonctionne également sur IE 6, 7 et 8, il suffit d'ajouter une ligne :

#coinsArrondis {
  -moz-border-radius: 8px 0 8px 0;
  -webkit-border-radius: 8px 0 8px 0;
  border-radius: 8px 0 8px 0;
  behavior: url(chemin/PIE.php);
}

Petite contrainte à respecter, il faudra utiliser la syntaxe simple (shorthand en anglais), vous ne pourrez pas utiliser la syntaxe du type border-top-left-radius pour définir vos coins arrondis. Il est à noter qu'il est tout à fait possible d'utiliser différents rayons pour chaque coin. D'autre part, les arrondis s'appliquent également aux fonds des éléments (images de fonds, couleur, dégradés), aux éléments de bordure et aux ombres.

Ombres portées (propriété `box-shadow`)

IE 9 et supérieurs prennent en charge les ombres portées de manière native. CSS3 Pie agit donc ici, à nouveau, uniquement pour IE 6 à 8.

Encore un cas simple. Les propriétés CSS3 "ordinaires" :

#ombrePortee {
  -moz-box-shadow: #000 3px 3px 5px;
  -webkit-box-shadow: #000 3px 3px 5px;
  box-shadow: #000 3px 3px 5px;
}

La ligne à ajouter pour que cela soit également pris en compte par IE 6, 7 et 8 :

#ombrePortee {
  -moz-box-shadow: #000 3px 3px 5px;
  -webkit-box-shadow: #000 3px 3px 5px;
  box-shadow: #000 3px 3px 5px;
  behavior: url(chemin/PIE.php);
}

Comme dit précédemment, l'ombre prendra la forme de l'arrondi si elle est associée à un cadre pourvu de coins arrondis. Il faudra tout de même bien garder à l'esprit que la forme de l'ombre générée pour IE sera opaque et donc visible sous un élément transparent ou semi-transparent. Le fond de l'élément devra donc être opaque en lui assignant une couleur par exemple pour masquer l'effet indésirable. Le mot-clé inset n'est pas encore pris en charge.

Dégradés linéaires (propriété `linear-gradient`)

Grâce à CSS3 Pie, les dégradés linéaires s'afficheront convenablement sur IE 6 à 9.

Exemple :

#degradeLineaire {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#EEE) to(#FFF));
  background: -webkit-linear-gradient(#EEE, #FFF);
  background: -moz-linear-gradient(#EEE, #FFF);
  background: -ms-linear-gradient(#EEE, #FFF);
  background: -o-linear-gradient(#EEE, #FFF);
  background: linear-gradient(#EEE, #FFF);
  -pie-background: linear-gradient(#EEE, #FFF);
  behavior: url(chemin/PIE.php);
}

Quelques limitations pour IE 6 à 8 (mais pas pour IE 9) :

Les couleurs du dégradé sont opaques (et non transparentes)
Les stops de couleurs situés à l'extérieur de la zone de l'élément ne sont pas pris en compte
Les paramètres de background-size/origin/repeat/position ne sont pas pris en charge, vous ne pouvez donc pas utiliser des effets évolués tels que présentés sur cette page : gradient pattern effects (en anglais).
Les dégradés radiaux ne sont pas pris en charge

Arrière-plans multiples (propriété `background`)

IE 9 et supérieurs prennent en charge les arrière-plans multiples de manière native. CSS3 Pie agit donc ici uniquement pour IE 6 à 8.

Les propriétés CSS3 pour deux images de fond, placées respectivement au centre et en haut à droite de l'élément :

#imagesFondMultiples {
  background: url(image1.png) no-repeat center, url(image2.jpg) no-repeat top right;
}

On ajoute à nouveau la propriété behavior mais il faut dans ce cas-là également ajouter la propriété -pie-background :

#imagesFondMultiples {
  background: url(image1.png) no-repeat center, url(image2.jpg) no-repeat top right;
  -pie-background: url(chemin/image1.png) no-repeat center, url(chemin/image2.jpg) no-repeat top right;
  behavior: url(chemin/PIE.php);
}

Remarque importante : le chemin vers les images doit être défini relativement au fichier HTML et non au fichier css !

On peut également associer une image à un dégradé. Un exemple pour la majorité des navigateurs modernes :

#fondImageDegrade {
  background: #DDD; /* Pour navigateurs ne prenant pas en charge CSS3 */
  background: url(image-fond.png) no-repeat center, -webkit-gradient(linear, 0 0, 0 100%, from(#DDD) to(#FFF));
  background: url(image-fond.png) no-repeat center, -webkit-linear-gradient(#DDD, #FFF);
  background: url(image-fond.png) no-repeat center, -moz-linear-gradient(#DDD, #FFF);
  background: url(image-fond.png) no-repeat center, -ms-linear-gradient(#DDD, #FFF);
  background: url(image-fond.png) no-repeat center, -o-linear-gradient(#DDD, #FFF);
  background: url(image-fond.png) no-repeat center, linear-gradient(#DDD, #FFF);
}

Cela donnerait pour un affichage sur IE 6 à 9 :

#fondImageDegrade {
  background: #DDD; /* Pour navigateurs ne prenant pas en charge CSS3 */
  background: url(image-fond.png) no-repeat center, -webkit-gradient(linear, 0 0, 0 100%, from(#DDD) to(#FFF));
  background: url(image-fond.png) no-repeat center, -webkit-linear-gradient(#DDD, #FFF);
  background: url(image-fond.png) no-repeat center, -moz-linear-gradient(#DDD, #FFF);
  background: url(image-fond.png) no-repeat center, -ms-linear-gradient(#DDD, #FFF);
  background: url(image-fond.png) no-repeat center, -o-linear-gradient(#DDD, #FFF);
  background: url(image-fond.png) no-repeat center, linear-gradient(#DDD, #FFF);
  -pie-background: url(chemin/image-fond.png) no-repeat center, linear-gradient(#DDD, #FFF);
  behavior: url(chemin/PIE.php);
}

Certaines propriétés d'arrière-plan ne sont pas prises en charge par IE 6 à 8 en utilisant -pie-background :

background-attachment (toujours utilisation de scroll même si fixed ou local sont spécifiés)
background-size (toujours utilisation de la taille intrinsèque de l'image)
les valeurs de background-repeat space et round (les autres valeurs de répétition sont prises en charge)
background-origin (toujours utilisation de padding-box)
les valeurs de background-position avec plus de 2 parties

A noter un effet collatéral tout à fait intéressant : la transparence alpha des images de fond affichées par l'intermédiaire de -pie-background sera correctement rendue sur IE6 !

Attention ! L'url des images d'arrière-plan doit être définie par rapport au fichier html et non à la css ! Je vous avais prévenu que je vous la ferais souvent celle-là

Il existe d'autres propriétés mises à disposition par CSS3 Pie, dont l'utilisation ne sera pas développée dans ce tutoriel, mais qui pourraient être fortes utiles (les liens vous renvoient vers la page concernant ces propriétés sur le site officiel de CSS3 Pie, en anglais donc) :

Pour clore ces explications, voici une page de démonstration confectionnée par votre serviteur (cliquez sur l'image). Vous y trouverez toutes les proriétés développées dans ce tutoriel et une copie de la feuille de style intégrant CSS3 Pie :

Problèmes connus

Il est bien évident que ce type d'outil ne peut être dépourvu de petits défauts, d'ailleurs sachez qu'au moment d'écrire ce tutoriel, CSS3 Pie est encore en version Beta. C'est pourquoi, tous les petits problèmes d'utilisation non résolus connus ont été répertoriés dans la page des « Known Issues ». En voici un rapide tour d'horizon (vous trouverez un lien à la fin de chaque paragraphe pointant vers les explications, en anglais, sur le site officiel de CSS3 Pie) :

Problème de z-index (disparition de bordure, d'ombres ou d'arrière-plans)

C'est un des problèmes les plus fréquemment rencontré. Il faut savoir que la génération de la décoration se fait dans un conteneur jumeau de l'élément cible placé avant celui-ci en positionnement absolute. Si l'élément cible est positionné en absolute ou en relative, le conteneur css3 sera affublé du même z-index que l'élément et sera donc placé en-dessous de celui-ci, ce qui correspond à l'effet désiré. Cependant, cela ne fonctionne pas si le positionnement de l'élément est static car le z-index n'est pas traité de manière appropriée par ce type de positionnement. Pour résoudre ce problème, il faut donc définir :

Soit une position relative pour l'élément cible
Soit une position relative à l'élément ancêtre et lui indiquer un z-index.

Problème de z-index sur le site CSS3 Pie

Chemin relatif

Je vous rappelle que le chemin vers PIE.php (ou PIE.htc) doit être défini relativement au fichier HTML et non à la CSS. Ce qui peut être problématique dans certaines conditions, puisque le chemin devra être soit défini en absolu (pas facile à réutiliser si les fichiers se situent dans différents dossiers), soit en relatif (ce qui ne facilite pas la réutilisation de la CSS par les différents fichiers HTML). D'autre part, les propriétés contenant des URL (comme border-image ou -pie-background) ne prendront pas non plus comme référence le fichier CSS pour retrouver les images, mais le fichier HTML (puisque c'est à aprtir du fichier HTML qu'est lancé le code JavaScript).

Chemin relatif sur le site CSS3 Pie

Problèmes avec `hasLayout`

PIE force hasLayout sur l'élément cible pour IE 6 et 7. La plupart du temps, aucun effet indésirable n'est constaté hormis la disparition des top-margin (espacement en haut).

Problèmes avec hasLayout sur le site CSS3 Pie

Modification des spécifications d'une propriété

Des propriétés étant définies d'une certaine manière à une époque peuvent être modifiées ultérieurement. Cela entraînerait donc une incompatibilité avec le fonctionnement de CSS3 Pie. Voilà pourquoi le développeur de CSS3 Pie a prévu des propriétés "propriétaires" pour les différents styles. Par exemple pour box-shadow, on peut également utiliser la version préfixée de cette propriété : -pie-box-shadow.

Modification des spécifications sur le siteCSS3 Pie

Limitation à l'utilisation dans le même domaine

Le fichier PIE.htc devra se trouver dans le même domaine que le fichier HTML. Exemple : http://www.monsite.com, n'est pas le même que http://monsite.com. Il est proposé une solution alternative basée sur un fichier PIE.js sur le site de CSS3 Pie pour tenter de pallier cela.

Limitation au même domaine sur le site CSS3 Pie

Problèmes sur certains types d'éléments

PIE ne fonctionne pas sur les éléments <body> et <html>. Evitez d'utiliser PIE sur les éléments <fieldset>, les balises <legend> n'étant bien traitées. Les éléments n'acceptant aucun enfant (<img />, <input />) vont générer des erreurs si vous utilisez des valeurs de taille relatives (em, ex). Il faudra donc utiliser des valeurs en px pour ces éléments-là.

Problèmes sur certains éléments sur le site CSS3 Pie

Zoom navigateur

Le zoom navigateur ne modifie pas la taille des images d'arrière-plan et la page semble complètement déstructurée. Ce problème sera résolu dans les versions ultérieures…

Zoom navigateur sur le site CSS3 Pie

L'avenir de CSS3 Pie

Il existe bien d'autres outils tentant de rétablir ce manque de conformité par rapport à la spécification du navigateur Internet Explorer, l'auteur de CSS3 Pie en a d'ailleurs listées quelques-unes sur son site (ce qui gage d'une bonne prise d'informations de sa part concernant ce sujet), mais CSS3 Pie semble vraiment être l'outil optimal, le développeur de ce bel outil étant vraiment attaché à le rendre le plus efficace possible. En effet, il reste simple d'utilisation, c'est une solution css la plus conforme possible aux spécifications, mise à jour régulièrement et ayant une communauté relativement active notamment sur le Forum du site officiel. Le développeur, Jason Johnston, compte ajouter d'autres fonctionnalités, ce qui ne gâche rien à cet outil simple et performant. Petite remarque de dernière minute, à l'heure ou j'écris ce tutoriel, CSS3 Pie faisait partie des trois finalistes du net magazine award 2011 dans la catégorie « innovation of the year », encore un signe tout à fait prometteur ;)

Ressources Web

Site officiel (avec une démonstration)
D'autres démos et exemples de sites
La page de démonstration de ce tutoriel
L'article de Raphaël Goetter : Utiliser CSS3 aujourd'hui, outils et ressources