How do I leave a gray-tinted image in cross-browser css?

Question

I’m trying like this:

img {
  filter: gray;
  /* IE6-9 */
  filter: grayscale(1);
  /* Microsoft Edge and Firefox 35+ */
  -webkit-filter: grayscale(1);
  /* Google Chrome, Safari 6+ & Opera 15+ */
}

<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

In the comments of the filters are informed the compatibilities, however I need to work on IE10 and 11.

Is there a cross-browser or Webkit that includes these two versions?

Answer 1

Problem:

There is currently no easy way to get property results filter in IE versions. See which browsers have support: http://caniuse.com/#search=filter

Alternatives:

Despite the appetites, there is always a way around the situation. Some I found were using: SVG, JS and CSS*. They all have their pros and cons, which the developer must take into account before applying/opting for one or the other.

---

SVG:

The svg solution has a good support and, in addition to working with the image, can work with various geometric shapes. But on the other hand, it’s not easy to use to create a responsive and dynamic layout. Example code with svg:

html

<svg width="400" height="377">
    <defs>
        <filter id="filtersPicture">
            <feColorMatrix type="saturate" values="0" />
        </filter>
    </defs>
    <image filter="url('#filtersPicture')" width="400" height="377" xlink:href="http://bit.ly/1QqyJ2D" />
</svg>

css

svg {
    width:500px; //Ou 100% também funciona
    height:400px;
}
svg image {
    width:100%;
    height:100%;
}

---

JS:

So far, as much as I use tutorial resolutions and responses (OS en) that claim to work, I haven’t been able to reproduce the effect, at least not in my IE (Win10 IE11), but follow the code/Link for using the JS method (using jQuery also - as selector and button to run the filter).

JS

$('#toggleDesaturate').click(function(){
    var imgObj = document.getElementById('image');
    grayscaleImageIE(imgObj);
});

function grayscaleImageIE(imgObj) {
    imgObj.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';
}

html

<div class="imgWrap">
    <img id="image" src="http://bit.ly/1QqyJ2D" />
</div>

If there is really support for this type of function, it becomes the best option so far, because we would be working directly with the image, being able to do better layout treatment.

---

CSS

The solution in css has 2 methods.

1. Through the estate -ms-filter *
2. Through the effect :hover

1- The property -ms-filter: grayscale(1); can be used in IE browsers until version 9, where some users reported problems and the function was eventually removed from version 10, with no return prediction. Behold: https://msdn.microsoft.com/en-us/library/ms530752(v=vs.85). aspx

2- Using the technique of :hover It would be necessary to have 2 images. A color version (or original) and another in black and white. This way you need to set the image as background property, changing the value of the url when there is one :hover element. Example:

html

<div class="imgWrap"></div>

css

.imgWrap {
    width:400px;
    height:200px;
    background-image:url('caminho/imagem/logo.jpg');
}
.imgWrap:hover {
    background-image:url('caminho/imagem/logo_cinza.jpg');
}

Thus, when there is a :hover your logo image changes from logo.jpg to logo_gray.jpg. Or vice versa.

---

See the examples:

SVG: https://jsfiddle.net/f5c2gwse/

JS: https://jsfiddle.net/q1xrLonq/

CSS: https://jsfiddle.net/egtvb1od/

---

Considerations:

One point that I recommend, and I always analyze when I start a project, is to assess well who my client is, who the target audience is and what the behavior of that audience on the web is to analyze how far it is feasible to focus development with IE support, since it has several limitations and even restrictions.

I hope this helps.