Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

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!

@justmarkup

This comment has been minimized.

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
}
@motss

This comment has been minimized.

motss commented Dec 15, 2016

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

@motss

This comment has been minimized.

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

This comment has been minimized.

OutThisLife commented Jun 20, 2017

window.CSS.supports still fails in Saf 😆

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