CSS Variables: var(--subtitle);

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.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. 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 …)

Join the Conversation

12 Comments

  1. 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 🙂

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.