Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Test for CSS Variables
function testCSSVariables() {
var color = 'rgb(255, 198, 0)';
var el = document.createElement('span');'--color', color);'background', 'var(--color)');
var styles = getComputedStyle(el);
var doesSupport = styles.backgroundColor === color;
return doesSupport;
Copy link

pawelgrzybek commented Feb 10, 2016

Nice one Wes, thank for help with that. I'm going to mention your way in my future article (in progress). Thanks a lot again!

Copy link

justmarkup commented Feb 26, 2016

Shouldn't be the following test reliable enough to detect CSS custom property support? Or am I missing something?

if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
  // CSS custom properties supported.
} else {
  // CSS custom properties not supported

Copy link

motss commented Dec 15, 2016

@justmarkup Your snippet does not guarantee to work. Safari 10 fails to return true.

Copy link

motss commented Dec 15, 2016

This is my version: hasNativeCSSProperties:

// Not too sure if it will trigger layout and paint for other CSS properties.
// I just use opacity which only triggers composite by default!
function hasNativeCSSProperties() {
 const opacity = 1;
 const el = document.body;
 let hasNativeCSSProperties = false;

 // Setup CSS properties.'--test-opacity', opacity);'opacity', 'var(--test-opacity)');

 // Feature detect then remove all set properties.
 hasNativeCSSProperties = window.getComputedStyle(el).opacity == opacity;'--test-opacity', ''); = '';
 return hasNativeCSSProperties;


Copy link

OutThisLife commented Jun 20, 2017

window.CSS.supports still fails in Saf 😆

Copy link

abhinavsingi commented May 2, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment