IE 11 css-vars-ponyfill 仅支持 :root 变量，但不支持内联变量答案

【问题标题】：IE 11 css-vars-ponyfill only support :root variable, but not support inline varibleIE 11 css-vars-ponyfill 仅支持 :root 变量，但不支持内联变量
【发布时间】：2019-09-19 06:33:01
【问题描述】：

内联变量在 IE 11 中不工作，甚至 :root 变量在“css-vars-ponyfill”的帮助下工作，但内联变量在 IE 11 中仍然不工作

:root {
    --bg-color: black;
  }
  
  .main{display:inline-block;
  background:var(--bg-color);width:200px;height:200px;}

<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2"></script>
<div style="--bg-color:red" class="main">

</div>

【问题讨论】：

可能是因为 IE 11 不支持...如果您想使用 css 变量并且必须支持 IE11，请不要内联使用它们。

标签： css internet-explorer-11 css-variables

【解决方案1】：

IE11 不支持自定义变量。

而且填充它并不容易，尤其是内联样式，因为无法使用 javascript 读取样式属性的原始应用值 - 相信我，我已经尝试了所有方法。

ie11 有一个 polyfill，几乎完全支持自定义变量。
https://github.com/nuxodin/ie11CustomProperties/

但你必须添加这样的内联样式：

<div style="--bg-color:red" ie-style="--bg-color:red">

【讨论】：

【解决方案2】：

CSS 自定义属性(var function) does not support IE browser。

您可以尝试添加css-vars-ponyfill polyfill 在IE浏览器中使用，代码示例如下：

<script src="https://unpkg.com/css-vars-ponyfill@2/dist/css-vars-ponyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-beautify@1/js/lib/beautify-css.min.js"></script> 
<script>
    cssVars({ 
        // Treat all browsers as legacy
        onlyLegacy: false, 
    });

</script>
<style >
    :root {
        --bg-color: green;
    }
    .main {
        display: inline-block;
        background: var(--bg-color);
        width: 200px;
        height: 200px;
    }
</style>
<div style="--bg-color:red" class="main">
    aa
</div>

结果如下：

可能你发现，在使用这个 Polyfill 时，Polyfill 并没有扫描内联 CSS 变量，看来这和 polyfill 有关，你可以查看this issue。

对于通用元素我们可以使用根声明，对于特殊元素我们可以直接使用内联样式和background-color:red样式。

【讨论】：