v136 · css

Design Token Debugger

Define a typed @property token and a fallback value of a different type. The debugger applies the expression to a live element and reads the computed value — showing whether Chrome 136's type-agnostic fallback rule preserves the fallback when the variable is missing, invalid, or present.

checking @property support… checking type-agnostic fallback…

Before Chrome 136, var(--typed-token, gradient-fallback) failed silently if the fallback's type didn't match the registered property's type. Chrome 136 makes the fallback type-agnostic: any syntactically valid value is accepted as a fallback, regardless of the registered type.

Configure tokens

Registered property (typed token)

Property name

Syntax (type)

Initial value

Set variable to

Variable value

var() expressions with fallbacks

Each row tests a different fallback type:

Computed results

Click "Debug expressions".

Chrome 136 fallback rule change

/* Pre-Chrome 136: fallback must match the registered type */ @property --brand-color { syntax: "<color>"; inherits: false; initial-value: blue; } /* This FAILED in Chrome <136: */ /* The fallback is a gradient (not a <color>), so it was ignored. */ background: var(--brand-color, linear-gradient(to right, red, blue)); /* Result: used initial-value (blue), not the gradient fallback */ /* Chrome 136: fallback is type-agnostic */ /* The fallback is evaluated regardless of --brand-color's registered type */ /* If --brand-color is missing or invalid, the gradient fallback IS used ✓ */ background: var(--brand-color, linear-gradient(to right, red, blue)); /* Result (136+): linear-gradient(to right, red, blue) ✓ */