Loading

CSS custom properties support test

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>CSS custom properties support test</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <h1>CSS custom properties support test</h1>

<div>
CSS test result:
<span class="css-test">
  <strong class="yes">supported</strong>
  <strong class="no">not supported</strong>
</span>
</div>

<div>
JS test result:
<span class="js-test">
  <strong class="yes">supported</strong>
  <strong class="no">not supported</strong>
</span>
</div>
  
    <script src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
@supports ( (--a: 0)) {
  .css-test .yes {
    display: inline-block;
  }
}

@supports ( not (--a: 0)) {
  .css-test .no {
    display: inline-block;
  }
}

.yes,
.no {
  display: none;
}
/* Downloaded from https://ahoj.co.uk/ */
'use strict';

function showElByClass(className) {
  document.querySelector('.js-test .' + className).style.display = 'inline-block';
}

if (window.CSS && window.CSS.supports && window.CSS.supports('--a', 0)) {
  showElByClass('yes');
} else {
  showElByClass('no');
}

This awesome code is write by Serg Hospodarets, you can se more from this user in the personal repository