5

Is there any way to make this CSS class work in Internet Explorer 11?

.inactive {
    filter: contrast(0.5) sepia(100%) hue-rotate(116deg) brightness(1.2) saturate(0.28);    
}

I tried to use the SVG grayscale filter but it doesn't work, also breaking the whole thing in common use browsers. "Avoid to use IE11", even being the best of the advises, is not a suitable solution in this case

Igino Boffa
  • 686
  • 1
  • 9
  • 21
  • 2
    No. See [IE11 css filter brightness](https://stackoverflow.com/q/49661874/1016716), [invert filter in IE11](https://stackoverflow.com/q/29602668/1016716), [Make a grayscale image with css in IE11 running in Quirks mode](https://stackoverflow.com/q/35711940/1016716), [Crossbrowser brightness filter over img using css](https://stackoverflow.com/q/23276405/1016716), [Changing brightness filter](https://stackoverflow.com/q/25043474/1016716) etc. – Mr Lister Nov 05 '18 at 11:52
  • 1
    You could check everytime this site to know if a property will work for all browsers https://caniuse.com/ – João Deroldo Nov 05 '18 at 12:10

2 Answers2

1

create a media query using -ms-high-contrast, in which you place your IE 10 and 11-specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+), it will only be parsed in Internet Explorer 10 and greater.

-ms-high-contrast supports two values: none and active. So to target IE10+ regardless of the property’s setting, use this media query:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
PrathapG
  • 751
  • 1
  • 7
  • 21
1

Older versions of Internet Explorer (4.0 to 8.0) supported a non-standard "filter" property that has been deprecated, IE 11 not support this property.

You could try to use an SVG overlay in IE 11 to accomplish the greyscaling. For example:

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        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);
        }

            svg image:hover {
                opacity: 0;
            }

    </style>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" id="svgroot" viewBox="0 0 400 377" width="400" height="377">
        <defs>
            <filter id="filtersPicture">
                <feComposite result="inputTo_38" in="SourceGraphic" in2="SourceGraphic" operator="arithmetic" k1="0" k2="1" k3="0" k4="0" />
                <feColorMatrix id="filter_38" type="saturate" values="0" data-filterid="38" />
            </filter>
        </defs>
        <image filter="url(&quot;#filtersPicture&quot;)" x="0" y="0" width="400" height="377" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s1600/a2cf7051-5952-4b39-aca3-4481976cb242.jpg" />
    </svg>
</body>

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

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

More details about SVG filter, you could refer to this blog.

If SVG filter still not working for you, I suggest you could try to just set the CSS Opacity property.

Zhi Lv
  • 18,845
  • 1
  • 19
  • 30