Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Feature detection for Native CSS Properties aka CSS Custom Variables
// 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();
@tobireif

This comment has been minimized.

Copy link

@tobireif tobireif commented Nov 30, 2017

Thanks! My version:

function supportsCssVariables() {

  var opacity = 1;
  var el = document.body;
  var result = false;

  // Setup CSS properties:
  el.style.setProperty('--test-opacity', opacity);
  el.style.setProperty('opacity', 'var(--test-opacity)');

  // Feature-detection:
  result = window.getComputedStyle(el).opacity == opacity;

  // Remove the set properties:
  el.style.setProperty('--test-opacity', '');
  el.style.opacity = '';

  // Plus "window.CSS" for IE11:
  return result && window.CSS;

}
@yukulele

This comment has been minimized.

Copy link

@yukulele yukulele commented Feb 13, 2018

1 is the default value for opacity.
so window.getComputedStyle(document.body).opacity give 1 even if css variables are'n supported
you should test it with other value like 0.5 or other property like z-index

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