Using @supports to detect if a browser supports CSS Variables

2 Comments on Using @supports to detect if a browser supports CSS Variables

UPDATE: The code snippet has been updated to use --custom instead of --. When Ire originally tweeted this -- was a valid name for a custom property. This is no longer the case.

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.

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)

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. 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 …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

2 Comments

  1. Reply
    1. Reply

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.