1

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 class="graph" style="--color: #8F00FF; --percent: 78%;"></div>

Bibliography:

  1. Reference Codepen (resolved)
  2. MDN Docs for @property rule
  3. Related
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
deekeh
  • 675
  • 1
  • 6
  • 21
  • I believe the way CSS works is that anything unrecognised is simply ignored so there's no need to "skip" anything if it's not recognised – Martin Dec 04 '22 at 11:57
  • I see. So, there must something else which does not make the chart go up to the specified number in Firefox? – deekeh Dec 04 '22 at 12:01
  • I am trying to have this code originally in Vue 2; and it fails terribly (with an unsupported error/warning) when I add it in the `` section of the component. – deekeh Dec 04 '22 at 12:09
  • there is something but not yet supported as well: https://www.bram.us/2022/01/20/detect-at-rule-support-with-the-at-rule-function/ – Temani Afif Dec 04 '22 at 12:26
  • So..... `@supports` itself isn't supported much as well? Ironic. Guess we'll just use `@supports at-rule(@supports) {}` then! – deekeh Dec 04 '22 at 12:28
  • 1
    the @supports is supported but the `at-rule()` is still not. You cannot test the support of at rules, only the support of properties or values – Temani Afif Dec 04 '22 at 12:31

1 Answers1

3

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 class="graph" style="--color: #8F00FF; --percent: 78%;"></div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Yes, I got the fix from your answer. Thanks for the submission! I can see, the `to` section of the `@keyframes` was not really required. Hence, omitting the requirement for `--percent-inner` too. – deekeh Dec 04 '22 at 12:39