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.

Elsewhere , , ,

7 Responses to CSS Variables: var(–subtitle);

  1. Pingback: Conditions for CSS Calculations | Bram.us

  2. Pingback: Why You Should Be Excited About Native CSS Variables | Bram.us

  3. Pingback: Reactive Animations with CSS Variables | Bram.us

  4. Pingback: Mocking Individual CSS Transform Functions using CSS Variables | Bram.us

  5. Pingback: Recreating the GitHub Contribution Graph with CSS Grid Layout | Bram.us

  6. Pingback: Ordering tabular data with only CSS thanks to CSS Variables | Bram.us

  7. Pingback: Using @supports to detect if a browser supports CSS Variables | Bram.us

Leave a Reply

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