css filter not applying in IE11

Question

To Apply color for bootstrap 2.3.2 Icons, I am using filter property in CSS. This works good in all browsers except IE11.

.apply-color {
    filter: opacity(0.5) drop-shadow(0 0 0 blue);
}

How can we achieve this for IE.

Answer 1

IE 11 DOES NOT support filter at all: https://caniuse.com/?search=filter.

There are different JS polyfils for filter techniques like 'grayscale' but I am not sure if there is one for you special settings which are more simple.

Thinking forward: as you really 'only' use opacity and drop-shadow you don't need filter in that case ...

IE11 supports:

• opacity
• box-shadow

... so you could achieve your styling without filters. And if you really need to provide support for eight years old and long outdated (nearly) not used IE11: just wrap the special settings for IE11 traditional to a separate IE11 stylesheet and include it to your html (see update below):

<!--[if IE 11]>
  <link href="ie11.css" rel="stylesheet" type="text/css">
<![endif]-->

---

UPDATE

According to the comment from Rich DeBourke below: IE11 does not support conditional comments. Here are additional links to that point (really a long time ago):

Information about conditional comments:
https://www.sitepoint.com/internet-explorer-conditional-comments/

Information about writing special CSS for old IE versions including IE11:
How to write a CSS hack for IE 11?
https://paper-leaf.com/insights/targeting-ie-10-11-browsers-css/