box-shadow et border-radius : les solutions possibles

A mon sens il n’y a que 3 solutions possibles à ce problème :

• Utiliser des images et compliquer à la fois le HTML et les CSS
• Faire l’impasse avec des techniques de dégradation gracieuse (graceful degradation) à savoir : une feuille de styles conditionnelle
• Un script javascript tel que DD_roundies pour les coins arrondis et l’utilisation des filtres propriétaires d’IE pour les ombres portées.

C’est là qu’intervient une quatrième solution…

CSS3PIE : la solution la plus aboutie

Ce petit script permet de bénéficier simplement des effets que nous recherchons – entre autres – avec Internet Explorer, versions 6 à 8. Il supporte les effets suivants :

• border-radius
• box-shadow
• border-image
• dégradés
• couleurs RGBA

ainsi que quelques autres propriétés à l’aide de règles spécifiques au script (voir la liste complète des propriétés supportées).

Mise en place simple

Pour installer CSS3PIE c’est très simple : téléchargez CSS3PIE, décompressez l’archive et glissez le fichier PIE.htc où bon vous semble sur votre serveur. Il faudra par contre bien faire attention à l’endroit où vous l’aurez placé.

Utilisation

Créez une règle CSS utilisant les propriétés convoitées :

.arrondi-ombre {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 5px 5px 5px #CCC;
	-webkit-box-shadow: 5px 5px 5px #CCC;
	box-shadow: 5px 5px 5px #CCC;
	behavior: url(/chemin/vers/PIE.htc)
}

Et voilà, si tout c’est bien passé Internet Explorer affiche correctement les coins arrondis et l’ombre portée ! Notez bien que l’url vers votre fichier PIE.htc commence par un / – permettant d’y accéder à partir de la racine de votre site. Ceci est important car, contrairement aux images, le fichier est servi à partir de l’url sur laquelle vous vous trouvez et non à partir du fichier CSS. Le mieux est donc d’utilser une url absolue et non relative.
Il se peut tout de même que le script ne fonctionne pas pour plusieurs raisons…

Bugs et solutions

Si votre serveur n’emploi pas le bon content-type pour les fichiers .htc :

Editez votre .htacces en ajoutant la ligne (vers le haut) : AddType text/x-component .htc.

Si cela ne fonctionne pas (souvent le cas sur des hébergeurs mutualisés, il faudra utiliser le fichier PIE.php (fourni dans l’archive) qui s’en chargera. Il suffira de placer ce fichier au même endroit que le fichier PIE.htc et modifier la règle CSS en conséquence : behavior: url(/chemin/vers/PIE.php).

Si cela ne fonctionne pas non plus (peu probable mais sait-on jamais), il faudra se résoudre à utiliser la version javascript : PIE.js qui est moins avantageuse en termes de rapidité d’éxécution (PIE.htc est appliqué de manière asynchrone alors que PIE.js l’est de manière synchrone), mais aussi car il faudra l’activer via du javascript en l’applicant à des éléments manuellement – mais cela fonctionne parfaitement avec des librairies comme jQuery (voir la documentation).

Disparition d’éléments (images de fond, bordures et ombres) :

CSS3PIE fonctionne en utilisant le z-index et s’il est appliqué à des éléments en position static ceux-ci vont disparaître puisque la position static ne participe pas à l’empilement z-index. La solution à ce problème est de régler l’élément sur lequel est appliqué CSS3PIE en position: relative ou son parent en position: relative avec un z-index.

Utilisez uniquement les propriétés raccourcies

Le script ne supporte que les propriétés raccourcies, par exemple :

border-top-left-radius: 10px;

ne fonctionnera pas alors que :

border-radius: 10px 0 0 0;

fonctionnera

Conclusion

Sans être absolument parfait, CSS3PIE est tout de même une excellente solution (si ce n’est la meilleure) pour utiliser simplement les effets CSS3 les plus demandés par les webdesigners. Une dernière remarque : si vous l’utilisez sur beaucoup d’éléments cela aura malheureusement pour effet de ralentir le rendu de la page (quelques secondes pour plus d’une centaine d’éléments), mais ca fonctionnera quand même…

Happy coding :)