Using @supports to detect if a browser supports CSS Variables

As tweeted by Ire Aderinokun:

@supports (color: var(--custom)) { 
   /* has support */
}

Not too surprising if you’ve used Feature Queries before, but what does surprise me is that you can make it work by only passing the prefix of CSS Custom Properties (e.g. --custom) into the var() function.

See the Pen
Supports CSS Variables by Bramus (@bramus)
on CodePen.