typed()

Registers a custom property with a type, so it animates and computes as that type.

Syntax

--name: typed(<value>, "<syntax>"?);

registry syntax: --name: typed(initial [, "<syntax>"])

Parameters

valuenumber, length, percentage, angle, time, resolution or colorrequired

The initial value. The syntax is inferred from it.

syntax<string>optional

An explicit syntax such as "<length>", as in @property.

Return value

The value. Under the hood it is CSS.registerProperty({ syntax, inherits: true, initialValue }).

Example

.dial {  --angle: typed(0deg);  rotate: var(--angle);  transition: --angle 400ms;}.dial:hover {  --angle: 90deg;}

Behavior

• Never overrides a native @property for the same name in a readable stylesheet.
• Without CSS.registerProperty, the property stays a plain, unregistered custom property.

Supported contexts

• Only as the whole value of a custom property.

Limitations

• Experimental.
• Registrations are document-wide and permanent; the platform cannot remove them.
• Native rules in cross-origin sheets can’t be seen, so a conflict there isn’t detected.

native equivalent · @property { syntax; inherits: true; initial-value }

Related