CSS custom properties and the cascade | adactio

CSS variables (aka CSS custom properties) do not have access to the cascade. That means they can't fall back to earlier rules, so if your variable is invalid, the browser will simply unset that property. Huh. Jeremy explains the logic behind why this needs to be the case but it's still interesting. I understand that dynamically generated variables should probably work this way, but on initial render I'm still surprised it doesn't hold on to the current cascade value whilst it checks the variable and just fall back to that if the variable is invalid.

But if I store the background colour in a custom property, I can no longer rely on the cascade.

Explore Other Notes

Newer

Pine.blog

Pine is an interesting tool for curating information. It acts as a feed reader, importing content from RSS, Atom, mf2 etc. That means you can subscribe to Tumblogs, YouTube channels, subreddit feeds […]

Older

The beauty of progressive enhancement

Manuel wanted to see how a new site he'd built worked on the updated Nokia 3310, which rocks a paired-down version of Opera Mini (yikes!). The answer? Surprisingly well, thanks to some clever […]
  • CSS variables (<em>aka</em> CSS custom properties) do not have access to the cascade. That means they can't fall back to earlier rules, so if your variable is invalid, the browser will simply unset […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.