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.

Show comment
Hide comment
@pawelgrzybek

pawelgrzybek 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!

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.

Show comment
Hide comment
@justmarkup

justmarkup 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
}

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.

Show comment
Hide comment
@motss

motss Dec 15, 2016

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

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.

Show comment
Hide comment
@motss

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

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.

Show comment
Hide comment
@OutThisLife

OutThisLife Jun 20, 2017

window.CSS.supports still fails in Saf 😆

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