Skip to content

Instantly share code, notes, and snippets.

@wesbos
Last active August 11, 2021 14:23
  • Star 20 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save wesbos/8b9a22adc1f60336a699 to your computer and use it in GitHub Desktop.
Test for CSS Variables
function testCSSVariables() {
var color = 'rgb(255, 198, 0)';
var el = document.createElement('span');
el.style.setProperty('--color', color);
el.style.setProperty('background', 'var(--color)');
document.body.appendChild(el);
var styles = getComputedStyle(el);
var doesSupport = styles.backgroundColor === color;
document.body.removeChild(el);
return doesSupport;
}
testCSSVariables();
@pawelgrzybek
Copy link

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!

@justmarkup
Copy link

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
}

@motss
Copy link

motss commented Dec 15, 2016

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

@motss
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.
 el.style.setProperty('--test-opacity', opacity);
 el.style.setProperty('opacity', 'var(--test-opacity)');

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

hasNativeCSSProperties();

@OutThisLife
Copy link

window.CSS.supports still fails in Saf 😆

@abhinavsingi
Copy link

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