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 :)

A quoi ça sert ?

Zen Coding est un plugin disponible pour un grand nombre d’éditeurs de code et permet d’accélérer grandement l’écriture de code HTML en convertissant une ligne de texte, dont la syntaxe est proche de code CSS, en markup HTML.

Pour comprendre le fonctionnement de Zen Coding considérons l’exemple suivant :

div#page>div.logo+ul#navigation>li*5>a 

Cette simple ligne sera convertie automatiquement en code HTML :

<div id="page">
  <div class="logo"></div>
    <ul id="navigation">
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
</div>

Redoutable non ?
En décomposant le fonctionnement, la ligne indique au plugin de :

• créer une div avec l’id #page (div#page) contenant (>)
• une div de classe .logo (div.logo) suivie (+)
• d’une liste non ordonnée d’id #navigation (ul#navigation) contenant (>)
• 5 objets de liste (li*5) qui contiennent (>)
• un lien (a)… ouf, rien que ça en une seule ligne !

Les possibilités du plugin

Actuellement Zen Coding propose les possibilités suivantes :

• Ajout d’attributs d’id et de class (#id.class) – les classes pouvant être chainées pour en appliquer plusieurs d’un coup.
• Ajout d’attributs sur mesure : div[title], a[title="Hello world" rel], td[colspan=2].
• La multiplication d’éléments : li*5 sera converti en 5 éléments <li>.
• La numérotation d’éléments : li.item$*3 deviendra 3 éléments <li class= »itemX »> où X est le numéro (en partant de 1) de l’élément.
• Plusieurs ‘$’ seront remplacés par des zéros : li.item$$$ deviendra <li class « item001″>.
• Des groupages qui potentiellement pourraient permettre d’écrire une page entière en une seule ligne : div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer.
• Le support de filtres (voir la documentation)

Télécharger Zen Coding

Le plugin est disponible pour plusieurs éditeurs différents et téléchargeable gratuitement ici : Zen Coding. Vous y trouverez également la documentation — relativement courte puisque le plugin est très simple.