Le tutoriel consacré aux ombrages en CSS3 a été complété par une astuce suggérée par Ladytron, concernant Internet Explorer et le support de l'ombrage, plus précisément l'effet de halo.
Pour rappel, IE (version 8 comprise) n'implémente ni box-shadow ni text-shadow. Pour combler ces lacunes, on peut employer des filtres, dont Glow (filtre propriétaire donc forcément non valide).
La syntaxe :
filter:progid:DXImageTransform.Microsoft.Glow(Color=#c0c0c0,Strength=8);
L'attribut Color désigne la couleur du halo.
L'attribut Strength désigne la taille de l'effet.
Voici une illustration : (Voir le résultat sur Internet Explorer)
Le rendu est loin d'être parfait... mais dans certains (rares?) cas il peut suffire.
Code utilisé :
Bien entendu, pour éviter de gêner les bons élèves, nous pouvons appliquer cette bidouille uniquement sur Internet Explorer à l'aide d'un commentaire conditionnel.
<!--[if lte IE 8]>
<style type="text/css">
.ombrage {
filter:progid:DXImageTransform.Microsoft.Glow(Color=#c0c0c0,Strength=8);
zoom: 1;
}
</style>
<![endif]-->
Commentaires
Pas convaincu, l'effet n'est pas bien rendu (IE6) et c'est pire sur un fond coloré. :-(
C'est certain qu'en tant qu'infographiste, je n'utiliserai pas ce filtre car l'esthétique est plutôt douteuse ;). Mais bon on ne sait jamais, certaines personnes peuvent en avoir besoin et il a le "mérite" d'exister...
Pour IE8 il me semble qu'il faut utiliser -ms-filter?
Ouch, c'est moche !
Je pense que dans 100% des cas, ce sera mieux sans =)
Sans parler des problèmes de perf engendrés par les filters, non ?
J'ai tendance à être entièrement d'accord : l'effet est effectivement d'un rendu assez "douteux", et aucune solution n'a été trouvée pour obtenir quelque chose de mieux (à part utiliser des valeurs faibles pour "strength").
Il est certain que la plupart du temps, on préférera ne pas avoir de halo pour IE plutôt qu'une chose donnant un genre de "nuage de pixels" ;) Peut-être que certains envisageront cette alternative, d'autres non… J'ai essayé, mais pas (du tout) adopté.
Pour IE8, la syntaxe "filter:…" fonctionne toujours :)
Coucou ! c'est pour mettre à jour la compatibilité navigateur : Opéra 10.53 affiche parfaitement le halo contrairement à ce qui est indiqué... il affiche aussi les .svg, affaire à suivre dans le design web