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(); |
This comment has been minimized.
This comment has been minimized.
Shouldn't be the following test reliable enough to detect CSS custom property support? Or am I missing something?
|
This comment has been minimized.
This comment has been minimized.
@justmarkup Your snippet does not guarantee to work. Safari 10 fails to return true. |
This comment has been minimized.
This comment has been minimized.
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 comment has been minimized.
This comment has been minimized.
window.CSS.supports still fails in Saf |
This comment has been minimized.
This comment has been minimized.
https://stackoverflow.com/a/26633844/1429097 answers it pretty well |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
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!