This library uses window.getComputedStyle(document.documentElement).getPropertyValue('--custom-prop') to find the value to replace the var(--custom-prop) with.
Unfortunately, this doesn't work in IE11 (as I just found out). So we fixed the plugin running in IE11 with #1, but unfortunately it still can't figure out the correct value. It does grab the fallback value in the form of var(--prop, fallback) correctly. It just cannot find the real value.
I know that css-vars-ponyfill has its own css parser, which is how it gets around IE11's limitation. Unless I'm doing something wrong (a definite possibility), this is gonna be an issue.....
Minimal demo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>IE computedStyle test</title>
<style>
:root {
--test: red;
}
</style>
</head>
<body>
<script>
document.addEventListener('DOMContentLoaded', function () {
let computed = getComputedStyle(document.documentElement).getPropertyValue('--test')
console.log('value of `--test`: "' + computed + '"')
})
</script>
</body>
</html>Chrome Output: value of '--test': " red"
IE11 Output: value of '--test': ""
This library uses
window.getComputedStyle(document.documentElement).getPropertyValue('--custom-prop')to find the value to replace thevar(--custom-prop)with.Unfortunately, this doesn't work in IE11 (as I just found out). So we fixed the plugin running in IE11 with #1, but unfortunately it still can't figure out the correct value. It does grab the fallback value in the form of
var(--prop, fallback)correctly. It just cannot find the real value.I know that
css-vars-ponyfillhas its own css parser, which is how it gets around IE11's limitation. Unless I'm doing something wrong (a definite possibility), this is gonna be an issue.....Minimal demo:
Chrome Output:
value of '--test': " red"IE11 Output:
value of '--test': ""