IE 11 css-vars-ponyfill поддерживает только: корневая переменная, но не поддерживает встроенную переменную

Question

Встроенная переменная

не работает в IE 11, даже: корневая переменная работает с помощью '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>

Answer 1

IE11 не поддерживает пользовательские переменные.

И его нелегко заполнить, особенно встроенные стили, потому что нет способа прочитать исходное примененное значение атрибута style с помощью javascript - поверьте, я пробовал все.

Для ie11 есть polyfill, который почти полностью поддерживает пользовательские переменные.
https://github.com/nuxodin/ie11CustomProperties/

Но вы должны добавить такие inline-стили:

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

Answer 2

Пользовательское свойство CSS (функция var) не поддерживает браузер IE .

Вы можете попробовать добавить полифилл css-vars-ponyfill , чтобы использовать его в браузере 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, кажется, что это связанов полифилле вы можете проверить эту проблему .

Для универсальных элементов мы могли бы использовать корневое объявление, для специального элемента мы могли бы напрямую использовать встроенный стиль и стиль background-color:red.