CSS Variable Fallbacks optimization guide as Expected in Internet Explorer 11
I'm deploying to production and I'm trying to use CSS variables for theming my web application, but I ran into an scenario with Internet Explorer 11 where the fallbacks don't seem to apply correctly. I've declared a variable for my main color like this: ```css :root { --main-color: #3498db; --fallback-color: #2980b9; } body { background-color: var(--main-color, --fallback-color); } ``` I expected that if `--main-color` wasn't supported, it would fall back to `--fallback-color`. However, in IE11, I'm getting a solid white background instead of the expected blue tones. I tried checking the implementation in the console, and the variable appears to be ignored completely. I also validated that the rest of my CSS is correctly scoped and without syntax errors. To troubleshoot, I added a fallback directly to the `background-color` property: ```css body { background-color: #2980b9; background-color: var(--main-color, #2980b9); } ``` This worked fine in other browsers, but IE11 still only shows the solid white background. If I remove the variable entirely, the fallback color appears as expected, so it seems to be related specifically to the use of CSS variables. Is there a known scenario with CSS variable fallbacks in IE11, or is there another approach I should consider to ensure that fallbacks work correctly in this browser? Any help would be greatly appreciated! I'm coming from a different tech stack and learning Css.