Description

I will quote a few parts from the specification that should give clear description of the feature:

[css-variables] provides primitive means for defining user-controlled properties, however these properties always take token lists as values, must always inherit, and can only impact document layout or paint by being re-incorporated into the value of other properties via a var() reference.

This specification extends [css-variables], allowing the registration of properties that have a value type, an initial value, and a defined inheritance behaviour

@property --size {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
  }

Rationale

• A better way to animate things: Registered custom properties allow us to animate almost anything.

• Syntax validation: A non-registered custom property can contain any value which can easily lead to errors. A registered custom property follow a syntax and cannot accept any values.

A custom property can become a registered custom property, making it act more like a UA-defined property: giving it a syntax that’s checked by the UA, an initial value, and a specific inheritance behavior.

• Better JavaScript manipulation: Unregistered custom properties are mainly strings so we are obliged to do an extra manipulation to get their data. With registered custom properties we no more have such issue. Below a screenshot to illustrate the difference:

• Chromium browser support this feature since too long (https://ishoudinireadyyet.com/) which leads us to the famous "Chrome-only" demos so it would be good to have a better support for such feature

• It's part of the Houdini project so it closely linked to other features like the Paint API and the Layout API.

This specification is complementary to [css-paint-api-1] and [css-layout-api-1], which allow custom properties to directly impact paint and layout behaviours respectively.

Specification

https://drafts.css-houdini.org/css-properties-values-api/

Tests

https://wpt.fyi/results/css/css-properties-values-api?label=master&label=experimental&aligned&view=subtest&q=property