Même si, Internet Explorer 6 est largement dépassé aujourd'hui, et même si, il est déclaré mort et n'est officiellement plus supporté par des acteurs majeurs de la toile comme YouTube, il n'en reste pas moins qu'il sera encore présent probablement quelques temps sur les machines connectées.

Puis, il y a le cas du 7 et du 8 aussi, qui eux, risquent d'être là encore pour quelques années. Et, malheureusement, ces navigateurs ne supportent absolument pas certaines informations de programmation de plus en plus utilisées aujourd'hui sur les sites, comme le CSS3. Même si cette norme n'est d'ailleurs pas encore définitive aujourd'hui, certaines de ses fonctions sont assurément là et prêtes à être utilisées.

Je viens donc vous présenter une astuce vraiment sympa qui permet - sans vous prendre la tête - d'améliorer le support du CSS3 dans ces vieux navigateurs rétrogrades. Un bon point donc pour homogénéiser un peu l'ensemble des résultats graphiques que vous demandez.

Pour cela, on va remercier et utiliser le script de Fetchak. Il faut donc le télécharger et le mettre sur son serveur. Enfin, dans notre feuille de style (.css), on va simplement rajouter cette commande aux valeurs qui font appel au CSS3. Internet Explorer 6, 7 et 8 seront alors chargés de télécharger le script qui leur permettra de traduire "normalement" les valeurs demandées.

Sont actuellement prises en compte :

• border-radius (pour arrondir les coins carrés)
• box-shadow (pour créer une ombre aux boites)
• text-shadow (pour créer une ombre aux textes)

Ainsi, là où vous utilisez border-radius, vous rajoutez cette ligne pour appeler le script placé dans le dossier "scripts" :

.mavaleur {
border-radius: 20px;
behavior: url(scripts/ie-css3.htc); /* permet le support css3 dans IE 6, 7, 8 */
}

Mais, si vous êtes un fervent utilisateur d'ombres et de bordures rondes sur beaucoup de valeurs, alors vous pouvez simplement mettre cette condition dans votre fichier de structure, par exemple entre les balises HEAD, ce qui aura pour effet de le télécharger automatiquement

<!--[if gte IE 6]>
<style type="text/css">
.mesvaleurs, #mavaleur1, #mavaleur2 {
behavior: url(scripts/ie-css3.htc);
}
</style>
<![endif]-->

Si vous avez plein de remarques à rajouter, les commentaires sont ouverts.