2

There is a draft of such feature as CSS.registerProperty. In fact, it allows to define types for CSS variables so that browser will be able to extend its abilities about them including animating values.

For me it seems strange that the feature that can be used for CSS-only purposes (example) has only JavaScript representation and can't be used from pure CSS.

Is there any reason to include it in JavaScript but not propose same thing for CSS?

The things that I can't do from CSS now:

  • Specify the type (syntax) - without it CSS animation wouldn't work (the same example)
  • Specify inherits: false
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Qwertiy
  • 19,681
  • 15
  • 61
  • 128
  • 1
    Isn't `--property: 'value'` is the same? I mean this syntax provides almost the same functionality for CSS as registerProperty - for JS. – lucifer63 Mar 04 '19 at 16:14
  • @lucifer63, see my example in other question. Without call to `registerProperty` Chrome does not animate it. So it is required for animation to work. But if user will turn off js, there wouldn't be the call, so animation will be lost. And I don't see reasons why it should work in suach manner. – Qwertiy Mar 04 '19 at 16:17
  • @lucifer63, also seems like `inherits` can't be set to `false` from css. – Qwertiy Mar 04 '19 at 16:22
  • 1
    Yeah, seems like they're not the same, sorry. – lucifer63 Mar 04 '19 at 16:23

1 Answers1

1

It's actually been discussed already, and if things go right, we should be able to use an @property rule.

Current discussions would convert your js to 

@property --alpha {
  syntax: "<number>"; 
  initialValue: 1;
  inherits: true;
})
Kaiido
  • 123,334
  • 13
  • 219
  • 285