v156 · @property

What each omission buys

Leaving a descriptor out is not only less typing — each one changes what the property does. Three live test beds, measured on real elements in this browser, for the three things you can now drop.

Dropping `initial-value`: per-use `var()` fallbacks

This is the one people actually want. An initial-value means the property always has a value, so var(--x, fallback) can never reach its fallback. Before Chrome 156 a typed property was required to have one, which meant choosing between typing and fallbacks.

with initial-value

@property --gap-a {
  syntax: "<length>";
  inherits: false;
  initial-value: 4px;
}
/* padding: var(--gap-a, 40px) */

measuring…

without initial-value

@property --gap-b {
  syntax: "<length>";
  inherits: false;
}
/* padding: var(--gap-b, 40px) */

measuring…

Dropping `inherits`: back to inheriting

An unregistered custom property inherits. Registration used to force you to say so explicitly on every single rule; omit it now and you get the ordinary custom-property behaviour back.

Parent sets the property here.

child reads: —

Dropping `syntax`: universal, and no longer animatable

Omitting syntax gives the universal type *. The property still works, but the browser no longer knows it holds a length, so it cannot interpolate it — the animation steps rather than sliding. That is the cost of dropping this one.

syntax: "<length>"

—

syntax omitted (universal)

—

Press Animate to compare interpolation.

Summary, as measured here

What this browser did with each registration
registration	accepted	var() fallback reachable	inherits	interpolates

Dropping initial-value: per-use var() fallbacks