Internet Explorer CSS filter

css internet-explorer-11 grayscale css-filters

11,396

Solution 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 */
}

Solution 2

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.

11,396

Author by

Igino Boffa

Updated on August 17, 2022

Comments

Igino Boffa over 1 year
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