如何在CSS和JavaScript中检测CSS @layer特性是否支持？

问题描述 #

我知道可以用@supports和CSS.supports()检测CSS特性支持，但没法检测CSS @layer的支持情况。我确定浏览器是支持该特性的——文本显示为purple，DevTools的CSS Layer按钮也正常显示，但以下检测代码全返回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>

正确的检测方式 #

方法1：通过layer()函数检测 #

利用layer()函数可作为CSS值一部分的特性，浏览器支持@layer就会识别该函数：

console.log(CSS.supports("color", "layer(test)")); // 支持则返回true

方法2：检测完整的@layer语法 #

CSS.supports()需要接收符合规范的完整规则片段，对于@layer，可以传递空的层规则：

console.log(CSS.supports("@layer {}")); // 支持则返回true

也可以直接用CSS的@supports规则编写兼容样式：

@supports (@layer {}) {
  /* 仅在支持@layer的浏览器中生效的样式 */
}

为什么之前的检测失败？ #

• 直接传递"@layer"或不完整的语法片段，CSS.supports()无法正确解析识别。
• layer不是CSS属性，检测"layer"或"layer: 1"这类无效语法自然返回false。

内容的提问来源于stack exchange，提问作者Luke Vo