CSS Variables: var(--subtitle);

As per usual, great talk by Lea Verou:

The key takeaway to me is the very first one she mentioned: they’re just custom properties. 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.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.

About the Author

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)