Search code examples
cssinternet-explorer-11css-variables

IE 11 css-vars-ponyfill only support :root variable, but not support inline varible

inline variable not working in IE 11, even :root variable working with the help of 'css-vars-ponyfill' but inline vaiable still not working in 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>

Solution

  • IE11 does not support custom variables.

    And its not easy to polyfill it, especially the inline-styles because there is no way to read the original applied value of the style-attribute with javascript - believe me, I've tried everything.

    There is a polyfill for ie11 which almost completely supports custom variables.
    https://github.com/nuxodin/ie11CustomProperties/

    But you have to add inline-styles like that:

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