@j3nnning
thanks for the post, nicely laid out. CSS custom properties (variables) are amazing.
One pain point I usually face is when there is a need for IE11 support (quite common) and appropriate polyfill has to be applied stackoverflow.com/questions/464299...
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.
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
@j3nnning thanks for the post, nicely laid out. CSS custom properties (variables) are amazing.
One pain point I usually face is when there is a need for IE11 support (quite common) and appropriate polyfill has to be applied stackoverflow.com/questions/464299...
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 supportingvar()
will fallback to it. i.e.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.