如何在浏览器不支持时禁用部分CSS代码？以@property适配为例

我想用CSS制作环形图表，由于background-image无法直接实现动画效果，打算借助CSS新增的@property规则来实现动画。但@property目前尚未被Firefox及部分其他浏览器支持，导致这些浏览器中图表的着色部分无法正常显示。我希望在浏览器不支持该规则时，禁用所有动画功能及不兼容的@property规则，仅让图表以无动画状态正常运行。请问能否在CSS（或SCSS）中实现类似if语句的条件代码设置？

原代码示例 #

CSS代码

@property --percent-inner {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

.graph {
  position: relative;
  height: 200px;
  width: 200px;
  border-radius: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: 1000ms ease-in-out forwards emerge;
  --percent-inner: 0;
  background-image: conic-gradient(var(--color) var(--percent-inner), #bbb 0%);
}

@keyframes emerge {
  from {
    --percent-inner: 0%;
  }
  to {
    --percent-inner: var(--percent);
  }
}

.graph::before {
  position: absolute;
  content: "";
  height: 150px;
  width: 150px;
  background: #fff;
  border-radius: 1000px;
}

HTML代码

<div class="graph" style="--color: #8F00FF; --percent: 78%;"></div>

可以通过**CSS特性查询（@supports）**实现这种条件判断，它相当于CSS中的"条件分支语句"，能精准检测浏览器对特定CSS特性的支持情况，具体实现如下：

1. 先定义基础兼容样式（无动画） #

先编写所有浏览器都能正常渲染的环形图表基础样式，直接使用--percent变量设置锥形渐变，不依赖@property和动画：

.graph {
  position: relative;
  height: 200px;
  width: 200px;
  border-radius: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 基础无动画样式，所有浏览器通用 */
  background-image: conic-gradient(var(--color) var(--percent), #bbb 0%);
}

.graph::before {
  position: absolute;
  content: "";
  height: 150px;
  width: 150px;
  background: #fff;
  border-radius: 1000px;
}

2. 用@supports检测@property支持性 #

仅当浏览器支持@property规则时，才加载动画相关的代码：

/* 检测浏览器是否支持@property自定义属性注册 */
@supports (property: --percent-inner) {
  @property --percent-inner {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 0%;
  }

  .graph {
    --percent-inner: 0%;
    /* 覆盖基础样式，使用可动画的自定义变量 */
    background-image: conic-gradient(var(--color) var(--percent-inner), #bbb 0%);
    /* 添加入场动画 */
    animation: 1000ms ease-in-out forwards emerge;
  }

  @keyframes emerge {
    from {
      --percent-inner: 0%;
    }
    to {
      --percent-inner: var(--percent);
    }
  }
}

实现原理 #

• @supports (property: --percent-inner)会自动检测浏览器是否支持@property语法，支持的浏览器会执行大括号内的动画代码；
• 不支持@property的浏览器会直接忽略这部分代码，使用之前定义的基础无动画样式，确保图表能正常显示；
• 整个实现无需JavaScript，纯CSS即可完成浏览器特性的条件适配。

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