如何编写用于检测custom CSS properties支持性的@supports语句？

• 定义自定义属性
  自定义CSS属性以--开头，格式为--属性名: 属性值;。通常在:root伪类中定义，实现全局可访问：

  :root {
    --main-color: black;
    --base-font-size: 16px;
    --padding-default: 12px;
  }
  

• 调用自定义属性
  使用var()函数引用自定义属性，还可以指定 fallback 值（当属性未定义时生效）：

  .card {
    color: var(--main-color);
    font-size: var(--base-font-size);
    padding: var(--padding-default, 10px);
  }
  

• 核心特性

  • 继承性：子元素会自动继承父元素的自定义属性值，无需额外声明
  • 动态修改：可通过JavaScript实时调整属性值，实现动态样式切换：

    document.documentElement.style.setProperty('--main-color', '#ff4400');
    

  • 作用域限制：自定义属性的生效范围由定义它的选择器决定，局部选择器内定义的属性仅对自身及后代元素生效

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