Internet Explorer CSS filter

Question

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

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