CSS filter grayscale image for IE 10

Question

Is there a way to make grayscale image filter work on IE 10 without JavaScript or SVG?

I've been using the following code successfully in all browsers except IE 10.

img{
filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter     id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /*     Firefox 10+, Firefox on Android */
filter:gray; /* IE6-9 */
-webkit-filter:grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);}

Answer 1

This approach only works in WebKit and Firefox. It doesn’t work in IE or Opera. WebKit is currently the only browser to support CSS filters, while Firefox supports SVG filters on HTML. Opera and IE support SVG filters, but only for SVG content.

There is no good way to make this work in IE10, as it dropped support for the legacy IE filters. There is a way, however, I’d not recommend it.

You can set IE10 to render using IE9 standards mode using the following meta element in the head:

<meta http-equiv="X-UA-Compatible" content="IE=9">

This will turn support back on for legacy IE filters. However, it has the side effect of dropping IE into IE9 mode, where the latest advancements in IE10 will no longer be supported. In your case it may be possible that you do not need these new features currently, but if you go down this road, you’d need to be aware of it when updating the site in future.