Intent to Implement: @property

[Anders Hartvoll Ruud]

Contact emails and...@chromium.org Explainer https://github.com/w3c/css-houdini-drafts/issues/137 Design docs/spec N/A -- Note however that the proposal was resolved added to the spec by the CSSWG at TPAC2018, but the actual edit has not taken place yet.

When the edit happens, it will be in css-properties-values-api. (Possibly Level 2).

  TAG review Will request one once there is a spec. Summary The @property rule is an alternative way to register a custom property, without JavaScript. It is not a brand new feature, but rather a new way to access an existing feature (CSS.registerProperty).

In short, it looks like this:

  @property --my-property {
    syntax: "<color>";
    initial-value: green;
    inherits: false;
  }

Which does exactly the same thing as:

  CSS.registerProperty({
      name: '--my-property',
      syntax: '<color>',
      initialValue: 'green',
      inherits: false
  });

Motivation Waiting for a script to register a property may not be desirable in all cases. Depending on (async) circumstance, registering a property in JS can cause a full recalc of the document, depending on when it happens. With @property, the registration can be part of the CSS stylesheet, the same way e.g. @keyframes can. Risks

Interoperability and Compatibility This is not a new feature, but rather an alternative way to access an existing feature. For any browser vendor implementing CSS.registerProperty, it should be not much additional work to support @property. Firefox: No public signals Edge: No public signals Safari: No public signals Web developers: Not sure. However the GitHub issue has 40 x 👍, 14 x ❤, and 1 x 🎉 at the time of writing.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)? Yes Is this feature fully tested by web-platform-tests? Not yet. Link to entry on the Chrome Platform Status https://www.chromestatus.com/features/5193698449031168