DEV Community

loading...

Discussion on: Reusable @keyframes with CSS custom properties

Collapse
j3nnning profile image
Jenning Ho Author • Edited

Great point. If your project requires support for IE11 and below, I would suggest refrain from implementing CSS custom properties on critical features and only leave it for fluff, things that are ok to break.

In the accepted answer from the link that you've provided (great link btw), it only works with custom properties in the root level. In the context of reusable keyframes, it would defeat the purpose because you want to be able to set the value at the selector level.

As a fallback, you can simply write another line with absolute value before the var() line, so any browser that aren't supporting var() will fallback to it. i.e.

  @keyframes fade {
    0% {
      opacity: 0;
      opacity: var(--fade-start, 0);
    }

    100% {
      opacity: 1;
      opacity: var(--fade-end, 1);
    }
  }

Any browser where var() isn't supported would simply fade from 0 to 1, your animation would not break completely, imo that would be a good enough fallback.