css - IE 中 CSS 变量的解决方法？

Question

我目前正在 Outsystems 中开发一个 Web 应用程序，我需要在其中自定义 CSS，我在其中使用了变量。我需要保证该应用程序可以跨浏览器运行，包括在 Internet Explorer 中。 IE 不支持 CSS 变量，如下图所示 this source .

由于我必须使用 CSS 变量，对于在 IE 中使用变量有什么解决方法吗？

Answer 1

是的，有一种方法，与使任何 css 兼容的方法相同:使用浏览器支持的特定 css 回退。

body {
  --text-color: red;
}

body {
  color: red; /* default supported fallback style */
  color: var(--text-color); /* will not be used by any browser that doesn't support it, and will default to the previous fallback */
}

这个解决方案是非常多余的，并且“几乎”违背了 css 变量的目的……但它对于浏览器兼容性是必要的。这样做基本上会使 css 变量变得无用，但我恳请您仍然使用它们，因为它会作为一个重要的提醒，提醒您这些值在其他地方被引用并且需要在所有情况下更新，否则您会忘记更新每个相关的出现“颜色”，然后您的样式不一致，因为相关的 css 值不同步。该变量将更多地用作注释，但非常重要。