IE中CSS变量的解决方法? [英] Workaround for CSS variables in IE?

问题描述

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

I'm currently developing a web application in Outsystems in which I have the need to customize the CSS, in which I'm using variables. I need to guarantee the app works cross-browser, including in Internet Explorer. IE doesn't support CSS variables, as you can see in the picture below from this source.

由于我必须使用CSS变量，因此在IE中使用变量是否有任何变通办法?

Since I have to use CSS variables, is there any workaround for the usage of variables in IE?

推荐答案

是的，有一种方法可以使所有css兼容:使用浏览器支持的特定css后备.

Yes there is a way, the same way you make any css compatible: use a specific css fallback that is supported by the browser.

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值不同步.该变量将更多地用作注释，但非常重要.

This solution is incredibly redundant and 'almost' defeats the purpose of css variables....BUT it is necessary for browser compatibility. Doing this would essentially make the css variables useless but I implore you to still use them because it will serve as an important reminder to the fact that these values are referenced elsewhere and need to be updated in all cases, otherwise you forget to update every related occurrence of 'color' and then you have inconsistent styling because relevant css values are out of sync. The variable will serve more as a comment but a very important one.

这篇关于IE中CSS变量的解决方法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！