CSS Filter Grayscale Image for Ie 10

CSS filter grayscale image for IE 10

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.

internet explorer 10 - how to apply grayscale filter?

IE10 does not support DX filters as IE9 and earlier have done, nor does it support a prefixed version of the greyscale filter.

However, you can use an SVG overlay in IE10 to accomplish the greyscaling. Example:

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}

(from: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)

Simplified JSFiddle: http://jsfiddle.net/KatieK/qhU7d/2/

More about the IE10 SVG filter effects: http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

CSS -webkit-filter: grayscale(0%) don't work in IE 10 and Safari

use this for all browsers

-webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */

refer http://labs.voronianski.com/css3-grayscale/

Make a grayscale image with css in IE11 running in Quirks mode

actually i turn my comment as an answer for feed back:

IE specific filter should stand last, so it is not overide by a next one.

Activex should also allowed to run

and of course, it should be in quirk mode ...

img.desaturate {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(desaturate.svg#greyscale);
    filter: gray;
}

Is it possible to filter an image in IE8 to black and white?

Grayscale filter has been natively supported by Internet Explorer since version 6, but recently Microsoft decided to remove this native CSS filter and since version 10, IE does not display grayscale images using the old technique.

But there is a cross-browser Grayscale image solution

Read this article - http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js/

---

Related Topics