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.

Published by Bramus!

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 …)

Join the Conversation

11 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.