@property detection

by lunarlogic489

HTML

<html>


  <div>
    <h3>`@property` checking by CSS</h3>
    Result: <span id="result-css"></span>
  </div>


  <div>
    <h3>`@property` checking by JS</h3>
    Result: <span id="result-js"></span>
  </div>


</html>

CSS

@property --my-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #c0ffee;
}

@property --num {
  syntax: "<integer>";
  initial-value: 3;
  inherits: false;
}


@counter-style my-style-fallback {
  system: cyclic;
  symbols: 'Not Supported''Not Supported';
}

@counter-style my-style {
  system: cyclic;
  symbols: 'Supported''Supported';
  range: 2 4;
  fallback: my-style-fallback;
}

#result-css {
  counter-set: num var(--num);
}

#result-css::after {
  content: 'Not Supported';
  content: counter(num, my-style);
}

JavaScript

const resultByJs = window.getComputedStyle(document.documentElement).getPropertyValue('--my-color');


document.getElementById('result-js').textContent = resultByJs === '' ? 'Not Supported' : 'Supported'