As per usual, great talk by Lea Verou:
The key takeaway about CSS Custom Properties to me is the very first one Lea mentioned: they’re just properties like the other CSS properties we already know. This means that the normal behavior of inheritance is in place, you can manipulate them from within media queries, and you can even get/set them via style
attributes or even JavaScript:
const el = document.querySelector('#my-elem');
// Get
var foo = window.getComputedStyle(el).getPropertyValue('--foo');
// Set
el.style.setProperty('--foo', newValue);
I’ve created pens for the background mouse position follower, and for the CSS scroll indicator.
See the Pen CSS Variables: Follow Mouse Position by Bramus (@bramus) on CodePen.
Related: CSS Variables Introduction →
So, the setter is setProperty, but the getter is not getProperty, it’s getPropertyValue. I wonder why these things still happen. It’s such a minor detail, but can be bothering 🙂