如何通过JavaScript检测CSS @scope特性支持情况？

你遇到的问题是因为:scope选择器和@scope规则是两个独立的特性——:scope早在@scope出现前就被部分浏览器支持（用于DOM元素的上下文选择），所以CSS.supports('selector(:scope)')无法准确反映对@scope规则的支持。而直接用CSS.supports('@scope')目前在支持的浏览器里也不生效，因为CSS.supports对at-rule的检测语法还没完全适配@scope。

推荐的检测方法 #

你提到的通过自定义属性的方法是目前最可靠的方案，不过可以简化实现：

function supportsCSSScope() {
  const testEl = document.createElement('div');
  const style = document.createElement('style');
  style.textContent = '@scope { :scope { --test-scope: 1; } }';
  document.head.appendChild(style);
  
  const computedStyle = getComputedStyle(testEl);
  const supports = computedStyle.getPropertyValue('--test-scope') === '1';
  
  document.head.removeChild(style);
  return supports;
}

// 使用示例
if (supportsCSSScope()) {
  console.log('当前浏览器支持@scope规则');
} else {
  console.log('当前浏览器不支持@scope规则');
}

这个方法的核心是：如果浏览器支持@scope，:scope在@scope块内会指向包裹的测试元素，自定义属性会被正确应用；不支持的话，该规则会被忽略，自定义属性不会存在。

为什么其他方法不可行 #

• CSS.supports('@scope')：目前浏览器对at-rule的supports检测还未适配@scope，即使支持该特性也会返回false。
• CSS.supports('selector(:scope)')：:scope选择器的支持早于@scope规则，比如Firefox支持:scope但暂不支持@scope，所以这个检测结果不准确。

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