internet explorer 9 - css3 text-shadow in IE9

Question

Is there an easy way to have css3 text-shadow's working in IE9? At least a single text shadow would be great. I guess ideally IE8 is supported as well. I'm hoping there's a simple jquery plugin or .htc file which just looks at text-shadow css property of an element and implements it for IE9.

Answer 1

Yes, but not how you would imagine. According to caniuse (a very good resource) there is no support and no polyfill available for adding text-shadow support to IE9. However, IE has their own proprietary text shadow (detailed here).

Example implementation, taken from their website (works in IE5.5 through IE9):

p.shadow { 
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#0000FF,direction=45);
}

For cross-browser compatibility and future-proofing of code, remember to also use the CSS3 standard text-shadow property (detailed here). This is especially important considering that IE10 has officially announced their intent to drop support for legacy dx filters. Going forward, IE10+ will only support the CSS3 standard text-shadow.