javascript - 如何检查 CSS 和 Javascript 是否支持 CSS @layer？

Question

所以我知道@support和 CSS.supports可以用来检查某些功能是否可用，但我无论如何都无法让它检测 CSS @layer 是否可用是否可用。我 100% 确定我的浏览器支持它，但以下检查均返回 false:

console.log(CSS.supports("@layer"))
console.log(CSS.supports("@layer a;"))
console.log(CSS.supports("@layer a {  }"))
console.log(CSS.supports("layer"))
console.log(CSS.supports("layer: 1"))
console.log(CSS.supports("layer", 1))

p {
  color: rebeccapurple;
}

@layer type {
  .box p {
    font-weight: bold;
    font-size: 1.3em;
    color: green;
  }
}

<div class="box">
  <p>Hello, world!</p>
</div>

上面的文本对我来说显示为紫色，所以我知道@layer可以工作并且DevTools的CSS Layer按钮会显示。然而所有测试都是错误。

此检查的正确提示是什么？

Answer 1

一种方法可能是测试 CSSOM 是否存在其中一种图层规则类型。例如

console.log(typeof CSSLayerBlockRule === 'function')