<h3>
  <a href="https://gist.github.com/malyw/477cd45bd0ed501a1c3ce0870ae16dd1">
  CSS @apply rule (for native CSS mixins) support test
    </a>
</h3>

<a href="https://tabatkins.github.io/specs/css-apply-rule/">CSS @apply rule</a> is
<strong class="yes">supported</strong>
<strong class="no">not supported</strong> in the current browser
.yes{
  display: none;
}

.supported .yes{
  display: inline-block;
}

.supported .no{
  display: none;
}
function testCSSApply() {
  const ID = 'id' + new Date().getTime();
  
  // include styles
  const styleEl = document.createElement('style');
  styleEl.innerHTML = `
  :root {
    --${ID}: {
      font-family: ${ID};
    }
  }
  #${ID}{
    @apply --${ID};
  }
  `;
  document.head.appendChild(styleEl);

  // include element
  const el = document.createElement('i');
  el.setAttribute('id', ID)
  document.documentElement.appendChild(el);

  // test
  const styles = getComputedStyle(el);
  const doesSupport = styles.fontFamily === ID;

  // cleaning
  document.head.removeChild(styleEl);
  document.documentElement.removeChild(el);

  return doesSupport;
}

if(testCSSApply()){
  document.documentElement.className += ' supported';
};
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.