How to disable a part of CSS code if it is not supported in a browser?-CodePudding

The @property CSS rule is a new addition in the CSS world, which is not yet supported in Firefox and some other browsers. I am trying to create a doughnut chart using CSS, where I try to animate it using the @property rule since, background-image cannot be directly animated.

But, since this at-rule is not supported everywhere, the colored portion of the chart does not show up properly (say, on Firefox) and I would like to disable all the animation functionality along with the unsupported @property rule when the browser does not support it, and just make it work without the animations.

Is there a way to conditionally set the code like an if statement in CSS? [SCSS would be fine too!]

@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;
}

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

Bibliography:

CodePudding user response：

Write the code differently.

^{I used mask to replace the pseudo element but it's irrelevant to the initial question}

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

.graph {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  animation: 1000ms ease-in-out forwards emerge;
  background-image: conic-gradient(var(--color) var(--percent), #bbb 0%);
  -webkit-mask: radial-gradient(50% 50%,#0000 calc(99% - 25px),#000 calc(100% - 25px));
}

@keyframes emerge {
  from {
    --percent: 0%;
  }
}

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