Using @supports to detect if a browser supports CSS Variables

As tweeted by Ire Aderinokun:

@supports (color: var(--)) { 
   /* 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. --) into the var() function.

See the Pen Supports CSS Variables by Ire Aderinokun (@ire) on CodePen.

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

β˜•οΈ Buy me a Coffee ($3)

Join the Conversation

2 Comments

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.