Skip to content

Instantly share code, notes, and snippets.

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.'--test-opacity', opacity);'opacity', 'var(--test-opacity)');
// Feature detect then remove all set properties.
hasNativeCSSProperties = window.getComputedStyle(el).opacity == opacity;'--test-opacity', ''); = '';
return hasNativeCSSProperties;

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:'--test-opacity', opacity);'opacity', 'var(--test-opacity)');

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

  // Remove the set properties:'--test-opacity', ''); = '';

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


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