Internet Explorer CSS filter

user_5838942 0
Viewed 12021

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

css-filters internet-explorer-11 grayscale css
2 Answers

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

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.

user_70622910
Related