IE fallback of css variables without ActiveX warning

Question

I am trying to do a graceful fallback for IE with CSS variables. So I did this:

body {
    background: brown;
    background: var(--main-bg-color);
}

This works, however IE warns of ActiveX component and makes me allow it. I attached a screenshot below. Is there anyway to fallback without the ActiveX prompt?

Answer 1

I'm talking out of ignorance here but are you absolutely sure the ActiveX problem is related to the use of a fallback for the background property with a custom property value? Are you using any add-ons for IE? If you are, have you tried disabling them?

Some add-ons depend on ActiveX and they can cause some issues when rendering a site if they're not working properly.

It strikes me as odd that a CSS fallback property could lead to this case, since most layout engines just ignore properties with invalid values, i.e.:

.class {
    color: #000;
    color: invalidValue;
}

Since invalidValue isn't a valid color value for the color property, it is a common practice for layout engines to ignore this property (and its value) and just use the previous declaration of that property (if there isn't a previous declaration, they fallback to the initial/inherited value). With this being said, if IE would have some sort of problem with your --main-bg-color custom property it should use brown as the fallback, as it was initially intended.