How to leave a grayscale image in cross-browser css?

Navigation
4

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.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">

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

Is there any way cross-browser or webkit that includes these two versions?

    
asked by anonymous 11.01.2016 / 20:41

1 answer

6

Problem:

There is currently no easy way to get the filter property results in IE versions. See which browsers are supported: link

Alternatives:

Despite the apesares, always has a way to get around the situation. Some that I found were using: SVG, JS and CSS *. All of them have their pros and cons, which the developer should take into consideration before applying / opting for one or the other.

SVG:

The svg solution has good support and, in addition to working with the image, can work with varied geometric shapes. But in contrast, it is not easy to use to create a responsive and dynamic layout. Code sample 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, although I use resolutions of tutorials and answers (SO en) that claim to work, I still can not reproduce the effect, at least not in my IE (Win10 IE11), but follow the code / Link to use the method in JS (using jQuery as well - as selector and button to rotate 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>

Ifthereisreallysupportforthiskindoffunction,itbecomesthebestoptionsofar,becausewewouldbeworkingdirectlywiththeimage,andcandobetterlayouttreatment.

CSS

Thesolutionincsshas2methods.

  • Throughproperty-ms-filter*
  • Throughthe:hovereffect%

    • 1-The-ms-filter:grayscale(1);propertycanbeusedinIEbrowsersuptoversion9,wheresomeusersreportedproblemsandthefunctionwaseventuallyremovedfromversion10,withnoreturnprediction.See: link

    2 - Using the :hover technique would require 2 images. One color (or original) and one black and white version. This way you need to set the image as the background property, changing the value of the url when there is a :hover in the 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');
}

    In this way, when there is a :hover your logo image changes from logo.jpg to logo_cinza.jpg. Or vice versa.

    See the examples below:

    SVG: link

    JS: link

    CSS: link

    Considerations:

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

    I hope this helps.

        
    11.01.2016 / 21:49
    How do I generate random numbers and without repeating them in a time interval? Doubt in a Java exercise [closed]