IE中CSS变量的解决方法？

Question

我目前正在Outsystems开发一个Web应用程序,我需要自定义CSS,我正在使用变量.我需要保证应用程序跨浏览器工作,包括在Internet Explorer中.IE不支持CSS的变量,你可以从下面的图片中看到此源.

由于我必须使用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值不同步.该变量将更多地作为评论,但非常重要.

Answer 2

如果有人遇到这个,有一个类似的问题,我把它设置为这样.

a {
  background: var(--new-color);
  border-radius: 50%;
}

我在变量之前添加了背景颜色,所以如果它没有加载,它会回落到十六进制上.

a {
  background: #3279B8;
  background: var(--new-color);
  border-radius: 50%;
}

Answer 3

有一个polyfill，它几乎可以完全支持IE11中的CSS变量：
https : //github.com/nuxodin/ie11CustomProperties
（我是作者）

该脚本利用了IE具有最少的自定义属性支持的事实，在该属性中，可以在定义和读取属性时考虑到级联。
.myEl {-ie-test:'aaa'} // only one dash allowed! "-"
然后用javascript阅读：
getComputedStyle( querySelector('.myEl') )['-ie-test']

从自述文件：

特征

• 处理动态添加的html-content
• 处理动态添加的元素
• 链式 --bar:var(--foo)
• 倒退 var(--color, blue)
• ：focus，：target，：hover
• js集成：
  • style.setProperty('--x','y')
  • style.getPropertyValue('--x')
  • getComputedStyle(el).getPropertyValue('--inherited')
• 内联样式： <div ie-style="--color:blue"...
• 级联工程
• 继承作品
• 3k（min + gzip）以下且无依赖

演示：

https://rawcdn.githack.com/nuxodin/ie11CustomProperties/b851ec2b6b8e336a78857b570d9c12a8526c9a91/test.html

Answer 4

如果我没记错的话，有一个解决方法，即 CSS #ID 选择器。我猜哪个应该适用于 IE > 6..所以你可以

.one { };
<div class="one">

应该作为

#one {};
<div id="one">