0

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?

Noitidart
  • 35,443
  • 37
  • 154
  • 323

1 Answers1

2

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.

NicolasJEngler
  • 565
  • 1
  • 10
  • 27
  • Thanks @Nicolas for this very much! This is a great point and I tested it, it seems its not the fallback. I really appreciate your message even after I deleted my comment!! – Noitidart May 18 '17 at 17:26
  • 1
    @Noitidart no problem at all, let me know if there's any other way I can help you debug this issue! – NicolasJEngler May 19 '17 at 16:16
  • Thanks my fellow Toptaller! I actually have not jumped into it, but as soon as I do I will let you know what the issue is for sure! :) – Noitidart May 19 '17 at 18:32