CSS variables not working on nested elements
maxjf1 opened this issue · comments
** Description **
I've create the following pen: https://codepen.io/maxjf1/pen/wvMPaav
It changes the css class of a element, after clicking on the button, changing css variables.
It doesn't change the button css variable.
Is there any workarround?
** Version **
4.1.0
** To Reproduce **
Access the pen on IE11 or the following emulator
https://ie11.ieonchrome.com/#https://codepen.io/maxjf1/full/wvMPaav
Hi
As the selector "body main" was not initialy seen as a element serving the variable --primary
It does not know that main is the element that serves it.
This would work:
body {
--background: #f6d9a7;
--text-color: #533f1c;
--primary: #d0a967;
font-size: 20px;
}
body main {
--primary: #d0a967;
}
body main.alt {
--background: #7d56e0;
--text-color: #541b25;
--primary: #da5160;
font-size: 20px;
}
Thanks for the feedback afterwards :)
I just changed the script to make it work, but I'm not releasing a new version yet, as I don't know how much it affects performance.
Thanks for the feedback afterwards :)
I just changed the script to make it work, but I'm not releasing a new version yet, as I don't know how much it affects performance.
Well, for me, it can affect the performance how much it wants. I will only use it for IE and IE users doesn't deserve performance 😆
Is there any place or URL i can get the beta version?
Maybe you :)
But with very large pages this can cause IE11 to crash.
It affects performance: 1000 els inside 100 parents: 1000ms instead of 600ms
I dont know if it is acceptable to release...
here the beta:
https://rawcdn.githack.com/nuxodin/ie11CustomProperties/c03395cf4582d06176a377a1a4ea89bf4a38e5af/ie11CustomProperties.js
As you can see, it works:
https://codepen.io/tobias_buschor/full/PoZexWL
Well, for me, it can affect the performance how much it wants. I will only use it for IE and IE users doesn't deserve performance laughing
I was kidding of course 😄
As you can see, it works:
https://codepen.io/tobias_buschor/full/PoZexWL
It Works! Perfect! thanks