Test for CSS Variables

css-variables.js

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();

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!

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!

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
}

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
}

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

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

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();

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();

window.CSS.supports still fails in Saf 😆

window.CSS.supports still fails in Saf 😆